HTML5 Canvas 2D 绘图
HTML5 canvas可以利用JavaScrpit在浏览器的页面上绘制图形、图片、文字，甚至做出动画效果。使用canvas编程，需要先获取一个上下文(context)，然后就可以在上面画图了。浏览器支持多个canvas上下文，每一个context都可以理解成一张画布。
这里有一些详细的介绍，可以参考。
http://blog.bingo929.com/html-5-canvas-the-basics-html5.html
http://www.neoease.com/html5-canvas-book-element-context/
http://simpleframework.net/blog/v/42608.html，这里介绍了canvas的变形，旋转、平移和缩放。
另外也参考了《HTML5高级程序设计》这本书
1. 创建canvas，只需在HTML代码中添加<canvas>元素
<canvas id="myCanvas" width="400" height="300">
当浏览器不支持canvas时，就会显示这些内容。
</canvas>
2. 在绘制之前需要先获取上下文
var elem = document.getElementById('myCanvas');
var ctx = elem.getContext('2d');
3. 绘制直线
<script type="text/javascript">
<!--
var elem = document.getElementById('myCanvas');
var ctx = elem.getContext('2d');
ctx.lineWidth = 1;//设置画笔的宽度，可不写，默认是1
ctx.strokeStyle = 'rgba(255,0,0,0.5)';//设置画笔颜色
ctx.moveTo(10, 10);//将笔移动到(10, 10)
ctx.lineTo(100, 100);//用笔画线到(100, 100)
ctx.stroke();//将线条绘制到canvas上
-->
</script>
颜色的设置与CSS相同，可以有下面四种方法，都表示红色。
ctx.strokeStyle = 'rgba(255,0,0,1.0)';
ctx.strokeStyle = 'red';
ctx.strokeStyle = 'f00';
ctx.strokeStyle = '#ff0000';
4. 绘制曲线
ctx.beginPath();//也可以不写
ctx.strokeStyle = 'rgba(255,0,0,0.5)';//设置画笔颜色
ctx.moveTo(0, 0);//将笔移动(10,10)
ctx.quadraticCurveTo(100,0,100,100);//前两个参数表示控制点的坐标，后两个参数表示终点的坐标
ctx.stroke();//将线条绘制到canvas上
控制点坐标为(100,0)时的曲线
控制点坐标为(80,20)时的曲线
quadraticCurveTo(x1,y1,x2,y2)；调用这个函数时，起点是当前坐标，终点是(x2,y2)，(x1,y1)是控制点坐标，控制点扮演的角色是对曲线有一种拉力，通过调整控制点的位置可以修改曲线的曲率。
5. 绘制路径
ctx.lineWidth = 5;//设置画笔的宽度，默认是1
ctx.lineJoin = 'round';//平滑路径的结合点
ctx.fillStyle = 'rgba(255,0,0,0.5)';//填充样式
ctx.strokeStyle = 'rgba(0,0,255,0.5)';//线条样式
ctx.beginPath();//开始路径
ctx.moveTo(10, 10);//用笔画线到(10, 10)
ctx.lineTo(10, 100);//用笔画线到(10, 100)
ctx.lineTo(40, 100);//用笔画线到(40, 100)
ctx.closePath();//闭合路径，也就是将终点与起点连起来
ctx.stroke();//将路径的线条绘制到canvas上
ctx.fill();//填充该路径区域
6. 绘制矩形
ctx.fillStyle = 'rgba(255,0,0,0.5)';//填充样式
ctx.strokeStyle = 'rgba(0,0,255,0.5)';//线条样式
ctx.strokeRect(0, 0, 50, 50);//只绘制矩形的边框
ctx.fillRect(55, 0, 50, 50);//填充一个实心的矩形
7. 绘制圆形
ctx.arc(100, 100, 50, 0, Math.PI * 2);//从0到2pi,以(230,90)为圆心,半径50画圆
ctx.closePath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';//填充样式
ctx.strokeStyle = 'rgba(0,0,255,0.5)';//线条样式
ctx.lineWidth = 5;
ctx.fill();//填充该圆形区域
ctx.stroke();//绘制圆形的边框
arc(x, y, radius, startAngle, endAngle, anticlockwise);一共有 6 个参数. (x, y )是圆心的坐标, radius 是半径, startAngle 是开始画圆的角度, endAngle 是结束画圆的角度, anticlockwise 是画圆方向（可选项, 默认值是 false, 使用逆时针）。startAngle和endAngle的角度使用弧度计算, 整圆弧度 2pi。详细介绍请看这里。
8. 绘制文字
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.strokeStyle = 'rgba(0,255,0,0.5)';
ctx.font = '40px serif';
//ctx.textAlign = 'center';//让文字在下面的(x,y)坐处标居中显示
ctx.textBaseline = 'top';//设置文字的基线，也就是下面的(x,y)坐标对于文字的位置。
ctx.fillText('Hello World！', 0, 0);
ctx.fillText('Hello World！', 0, 50, 50);
ctx.strokeText('Hello World！', 120, 0);
ctx.strokeText('Hello World！', 120, 50, 200);//绘制文字轮廓
context绘制文本的功能由两个函数组成：
fillText(text, x, y, maxwidth);
strokeText(text, x, y, maxwidth);
maxwidth这个参数为可选，表示该文本最大绘制宽度，当超过这个宽度时，会强制将文本收缩到指定尺寸，若小于则不收缩。
ctx.measureText('text').width;可以返回当前context环境下指定文本的宽度。
关于textAlign和textBaseline可以在这里查到更多信息。
canvas也可以应用CSS元素来设置边框等，而且一些CSS属性还可以被CSS内的元素继承，如字体样式，在canvas绘制文字，默认样式与canvas相同。
9. 制作动画
这里介绍了一个JS的动画框架，使用了逐帧绘制的方法。
http://www.funnyhao.com/a-js-animation-framework-based-on-html5-canvas/
在制作动画中，如果涉及到多个场景，需要有一个类似时间轴一样的东西，在到达某个时间时触发某个场景，但是JS里没有sleep方法，所以比较麻烦，可以简单的使用setInterval来实现，但是结构不好控制，因为一个场景必须在上一个场景之后发生，这样容易发生循环嵌套。另外一种思路就是直接算出该场景需要花多少时间，然后等待指定时间后触发场景，不过这样的方法容易在用户切换页面，导致时间继续，但是动画却停止绘制，导致了画面的不同步问题。
var time = 0;//模拟时间轴
sceneOne();//场景1
time += timeScene1;//加上场景1所需的时间
var int2 = setInterval((function()
{
clearInterval(int2);
sceneTwo();//进入场景2
}), time);
time += timeScene2;
var int3 = setInterval((function()
{
clearInterval(int3);
sceneThree();//进入场景3
}), time);
有一个Jsecx的js库可以实现类似sleep的方法，由于知道的比较晚，已经先用土方法做出了小动画，留待之后研究。
另附上两个之前做好的简单的HTML5 Canvas动画，Happy New Year 2012，Starry-Starry-Night。
