关于开发html5 2d 动画和游戏以及打包发布为手机APP（简单入门）
写一下关于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); 相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...