两个月canvas画板第一版终于到了测试阶段，也有时间总结记录下canvas。半路出家面向MDN从0摸索了一段时间，希望看完这个系列能和大家共勉。
什么是canvas?
作为html5的新标签，canvas使得开发者可以通过脚本语言在HTML绘制图形。正是因为绘制图形的功能，我们可以用来开发小游戏、压缩图片等，可以替代即将被淘汰的flash。
开始绘画
<canvas id="app" width="500" height="500"></canvas>
//获取页面节点，渲染页面上下文
var canvas = document.getElementById('app'),
ctx = canvas.getContext('2d');
canvas标签有两个属性，width和height来设置画布的大小。通过设置的id来获取画布。getContext('2d')方法使得创建的画布类型为2d。来看下获取到的上下文是什么样子的。其中的属性有填充色、线宽、字体大小等。在获取到上下文之后，就可以绘画图形了。
ctx.PNG
直线
ctx.moveTo(10,10);
ctx.lineTo(100,100);
ctx.stroke();
矩形
//空心矩形
ctx.rect(10,10,100,100);
ctx.stroke();
//实心矩形
ctx.fillStyle = 'red';
ctx.rect(10,10,100,100);
ctx.fill();
//简写
ctx.fillStyle = 'red';
ctx.fillRect(10,10,100,100);
圆
//空心圆
ctx.arc(200,200,100,0,2*Math.PI,true);
ctx.stroke();
//实心圆
ctx.fillStyle = 'red';
ctx.arc(200,200,100,0,2*Math.PI,true);
ctx.fill();
看了上面的基本图形的绘画代码，可以总结出结果共同点，方便记忆：
- stroke()用于当前画线样式，绘制当前路径的方法。fill()根据当前填充样式，填充当前路径的方法
- 对于矩形，填充当前路径，可以使用简写方法fillRect()
- 对于直线moveTo()起点，lineTo()终点或过程点
