HTML5 canvas 绘图与动画
canvas
<vanvas id="canvas" width="900" height="500">Your browser does not support canvas!</canvas>
注意：开始和结束标签中的内容是在浏览器不支持canvas时显示的内容
canvas 不适合在 css 样式中设置宽高，应该直接设 width 和 height 属性的值，原因是：css 中设置的宽高是 canvas 显示画布的大小，而在属性中设置的宽高表示 canvas 画布内动画显示的宽高。
1. 一般的设置
1 window.onload = function () {
2 var canvas = document.getElementById("canvas"),
3 contaxt = canvas.getContext("2d");
4 if (!context) {
5 alert("该浏览器不支持canvas!");
6 }
7 }
2. 画线
1 context.moveTo(100, 100); //先设置绘制路径行为
2 context.lineTo(500, 500);
3 context.lineTo(500, 100);
4 context.lineTo(100, 100);
5
6 context.lineWidth = 5;
7
8 context.strokeStyle = "#005588";
9 context.stroke(); //笔画,绘制上面的行为，默认将图形自动封闭
3. 着色
1 context.moveTo(100, 100);
2 context.lineTo(500, 500);
3 context.lineTo(500, 100);
4 context.lineTo(100, 100);
5
6 context.fillStyle = "#f00";
7 context.fill();
4. 绘制两部分图形
1 context.beginPath(); //开始新的绘制
2 context.moveTo(100, 100);
3 context.lineTo(500, 500);
4 context.lineTo(100, 500);
5 context.lineTo(100, 100);
6 context.strokeStyle = "#f00";
7 context.stroke();
8 context.closePath(); //结束本次绘制
9
10 context.beginPath(); //开始新的绘制
11 context.moveTo(200, 100);
12 context.lineTo(500, 400);
13 context.strokeStyle = "#000"
14 context.stroke();
15 context.closePath(); //结束本次绘制
5. 绘制一个圆
context.arc（centerX，centerY，radius，startingAngle，endingAngle，anticlockwise=false（此参数可省略，默认false））；
参数（圆心x坐标，圆心y坐标，半径，开始的位置弧度，结束的位置弧度，false顺时针，true逆时针）
理解弧度
1 例：
2 context.arc(200, 200, 100, 0, 1.5*Math.PI);
3 context.lineWidth = 5;
4 context.stroke();
6. 对矩形空间内的图像进行刷新
cont.clearRect(0, 0, context.canvas.width, context.canvas.height);
