关于开发html5 2d 动画和游戏以及打包发布为手机APP（简单入门）

写一下关于html5 2d 以及发布手机APP的文章

 

先构思我们想要用html5 做点什么事情： 

  1.用html5代码创建一块用于作画的画布canvas

  2.在canvas中写一句话如：你好，这是此系列的第一个html5 2d页面

  3.在canvas中画一个实心圆，并且让实心圆自动向右移动300像素

   

  效果如下：

   （图一）

   （图二）

    

代码1：

 

 

 

熟悉html 的朋友一定会发现html5 2d的代码同样离不开如下的形式

 

 其实也就是在普通html的代码里面加上,然后给body添加onLoad属性并设JS代码init()方法进入画图，意思就是当整个页面的标签被打开时，就用JS代码里面的init()函数去处理后面的事情，我们这里的init()是用来控制canvas去做什么画图的事情。（canvasid是canvas画布的id,可以自己设置）

 

 

所以怎么去画什么，，重点在于在javascript代码里（入门的东西唠叨一下，呵呵）

 

 

 

 

代码一里面只定义了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并赋值，咱们的圆就动了

 

关于如何打包发布，这里推荐一个完全免费的编辑和发布软件 HBuilder ------一个当小博主在工作的时候经常使用的代码编辑软件，原因就是因为够快，下载完毕以后就可以双击桌面快捷方式打开HBuilder 

打开软件后选左上角的 新建  ---> 移动APP   （要开发的是移动APP就选这个，如果开发的是普通的html网页就选web项目）

 会弹出个创建移动APP对话框，输入项目名称 （这里是test1）

 

 见到项目编辑器，双击index.html，会打开代码编辑器，同时也打开了即时Web浏览器；接着当然是在把代码编辑器里面的代码改为“ 代码一”，当右边web浏览器自动显示出黑球运动的动画，就OK了

 

最后，我们想打包发布APP，请确保网络连接正常（因为是远程打包，如果想本地打包则要在本机安装安卓或IOS的SDK），只需要点击上面菜单的 发行->发行为原生安装包，选Android,使用DCloud公用证书即可，然后点选右下角的  打包

 

如果提示可能缺少权限，实际是还没给程序添加像摄像头，定位之类的权限，，由于我们没用到这些功能，直接选 确认没有缺少权限，继续打包  即可

 

提交云端成功后，点确定

 

会显示制作安装包的状态

 当显示 打包成功，下载完成 时， 点击 打开下载目录 ，就可以看到打包完成的APP安装包

 这样就可以把APK放到模拟器或者安卓手机上去测试一下啦，呵呵