Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap)。
1.Canvas基本框架
*HTML
<canvas id="canvas" style="width: ;height= ;">您的浏览器不支持canvas!</canvas>//标签里面可以设置style，符合W3C标准.
*javascript
每个canvas节点都有一个对应的context对象（上下文对象），Canvas API定义在这个context对象上面，所以需要获取这个对象，方法是使用getContext方法。
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');//使用context进行绘制
注:如果getContext的参数是"webgl",就表示用于生成3D图像（即立体图案）.
2.基本绘图状态
*直线
context.moveTo(x,y);//起始位置
context.lineTo(x,y);//终点坐标
*弧线
context.arc(cx,cy,r,sAng,eAng,anticlock);//cx，cy是圆心坐标；r是半径；sAng,eAng是圆弧的角度；anticlock-布尔值(表示顺时针还是逆时针作图)
*封闭图形-隔开每次画图
context.beginPath();//开始新的状态路径绘制
context.closePath();//关闭此次绘制
3.绘图样式
context.lineWidth-线条宽度
context.strokeStyle-绘图线条的样式
context.fillStyle-填充的样式
4.绘图
context.stroke();-绘图命令
context.fill()；-填充命令
5.指定区域刷新
contetx.clearRect(x,y,width,height);
6.找到canvas画布
context.canvas
7.canvas画布本身的属性
canvas.width
canvas.height
canvas.getContext('2d')//绘图环境
8.绘制动画效果
setInterval(function(){
render();//渲染
update();//数据更新
},50);//定时器
9. 绘制文本-fillText(string, x, y) 用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式(写法类似与CSS的font属性)。与此类似的还有strokeText方法,用来添加空心字。
// 设置字体
ctx.font = "Bold 20px Arial";
// 设置对齐方式
ctx.textAlign = "left";
// 设置填充颜色
ctx.fillStyle = "#008600";
// 设置字体内容，以及在画布上的位置
ctx.fillText("Hello!", 10, 50);
// 绘制空心字
ctx.strokeText("Hello!", 10, 100);
10.Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():
11.Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y); // x,y表示图像左上角在画布中的位置
例:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
