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

lanyanai 2017-01-28

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

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

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

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

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

   

  效果如下:

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

   (图二)

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

代码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;
 

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

变量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);
 

相关推荐