写一下关于html5 2d 以及发布手机APP的文章
先构思我们想要用html5 做点什么事情:
1.用html5代码创建一块用于作画的画布canvas
2.在canvas中写一句话如:你好,这是此系列的第一个html5 2d页面
3.在canvas中画一个实心圆,并且让实心圆自动向右移动300像素
效果如下:
(图一)
(图二)
代码1:
<head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>画圆动画</title> <script type="text/javascript"> var x = 100; var y = 100; var ctx; var canvas1; function init() { ctx = document.getElementById('canvas').getContext('2d'); canvas1 = document.getElementById('canvas'); ctx.font = "bold 10pt sans-serif"; setInterval(function(e) { animate(); }, 100); } function animate() { ctx.clearRect(0, 0, canvas1.width, canvas1.height); ctx.fillStyle="black"; ctx.fillText("你好,这是此系列的第一个html5 2d页面.", 10, 20); ctx.beginPath(); ctx.arc(x, y, 50, 0, 2 * Math.PI); ctx.fill(); if (x < 300) { x++; } } </script> </head> <body onLoad="init();"> <canvas id="canvas"> </canvas> </body> </html>
熟悉html 的朋友一定会发现html5 2d的代码同样离不开如下的形式
<html> <head> </head> <body> </body> </html>
其实也就是在普通html的代码<body></body>里面加上<canvas id="canvasid"></canvas>,然后给body添加onLoad属性并设JS代码init()方法进入画图,意思就是当整个页面的<body>标签被打开时,就用JS代码里面的init()函数去处理后面的事情,我们这里的init()是用来控制canvas去做什么画图的事情。(canvasid是canvas画布的id,可以自己设置)
<body onLoad="init();"> <canvas id="canvas"> </canvas> </body>
所以怎么去画什么,,重点在于在javascript代码里(入门的东西唠叨一下,呵呵)
<script type="text/javascript"> function init() { //....................................... } </script>
代码一里面只定义了4个变量,变量x为我们要作的圆的横坐标,变量y为我们要作的圆的纵坐标(也就是要画图的位置,从canvas画布的左上角)
var x = 100; var y = 100;
变量ctx用于保存用于在canvas画布上绘图的环境
var ctx;
ctx = document.getElementById('canvas').getContext('2d');
变量canvas1用于保存canvas画布标签,主要作用只是用来获取canvas画布在网页的宽和高;
var canvas1;
canvas1 = document.getElementById('canvas');
设置画布环境的字体
ctx.font = "bold 10pt sans-serif";bold为加粗
10pt 是字体的像素大小
sans-serif 代表所用的是sans-serif字体
如果你想设置为黑体,20像素,不加粗,代码就是
ctx.font = "10pt 黑体";
动画功能就是设置一个计时器,用计时器去不断去执行animate()方法里面的代码,每100毫秒1次
setInterval(function(e) { animate(); }, 100);最后就是animate方法里面,做咱们的画图 1.刷新画布为空白
ctx.clearRect(0, 0, canvas1.width, canvas1.height);有人可能会问为什么要刷新画布为空白,那不是每100毫秒都要把画布刷新为空白吗? 答:是的,如果不每次都刷新画布为空白,会得到下面的效果: 为啥会得到上面的效果?因为画布不断地画圆,前面画出来的没有清空,实际咱们看到了很多个圆重叠在一起。 在画布横坐标10,竖坐标20的位置画出我们要写的字:
ctx.fillStyle="black"; //设置画图颜色为黑色 ctx.fillText("你好,这是此系列的第一个html5 2d页面.", 10, 20);
画实心圆:
ctx.beginPath(); ctx.arc(x, y, 50, 0, 2 * Math.PI); ctx.fill();ctx.beginPath();这句很重要,就是打开一个路径,如果不重新打开一个路径,程序就会以一条弧线不断转圈的方式去画 ctx.arc(x, y, 50, 0, 2 * Math.PI);画出我们的圆,x为横坐标,y为竖坐标,50为圆半径, 2 * Math.PI为你要画的是满圆,,如果画半圆那就是 1 * Math.PI ctx.fill(); 把圆心填充满 最后就是为什么圆会动的秘密,添加:
if (x < 300) { x++; //等同于x=x+1 }如果x小于300,那x就自动加1,此代码由于在计时器自动执行的animate()方法里面,所以每100毫秒执行animate()方法的时候都会执行到 如果x小于300,x就自动加1并赋值,咱们的圆就动了
if (x < 300) { x++; //等同于x=x+1 }如果x小于300,那x就自动加1,此代码由于在计时器自动执行的animate()方法里面,所以每100毫秒执行animate()方法的时候都会执行到 如果x小于300,x就自动加1并赋值,咱们的圆就动了 关于如何打包发布,这里推荐一个完全免费的编辑和发布软件 HBuilder ------一个当小博主在工作的时候经常使用的代码编辑软件,原因就是因为够快,下载完毕以后就可以双击桌面快捷方式打开HBuilder 打开软件后选左上角的 新建 ---> 移动APP (要开发的是移动APP就选这个,如果开发的是普通的html网页就选web项目)
会弹出个创建移动APP对话框,输入项目名称 (这里是test1)
见到项目编辑器,双击index.html,会打开代码编辑器,同时也打开了即时Web浏览器;接着当然是在把代码编辑器里面的代码改为“ 代码一”,当右边web浏览器自动显示出黑球运动的动画,就OK了 最后,我们想打包发布APP,请确保网络连接正常(因为是远程打包,如果想本地打包则要在本机安装安卓或IOS的SDK),只需要点击上面菜单的 发行->发行为原生安装包,选Android,使用DCloud公用证书即可,然后点选右下角的 打包
如果提示可能缺少权限,实际是还没给程序添加像摄像头,定位之类的权限,,由于我们没用到这些功能,直接选 确认没有缺少权限,继续打包 即可
提交云端成功后,点确定
会显示制作安装包的状态
当显示 打包成功,下载完成 时, 点击 打开下载目录 ,就可以看到打包完成的APP安装包 这样就可以把APK放到模拟器或者安卓手机上去测试一下啦,呵呵