canvas summary

canvas是不能用style来设置width和height的，只能在canvas标签上直接写才行。

fill 填充颜色（实心）；

stroke 填充线的颜色（空心）；

fillStyle 实心的颜色；

stroke 空心，线的颜色；

rect 画矩形，fillRect画实心矩形，context.fillRect(x,y,width,height) context.strokeRect(x,y,width,height) 用来画边框；

arc 画圆形（也可以画扇型），（x坐标，y坐标，半径，起始角度（如果圆形，一般为0），结束角度（Math.PI × 2圆周率），顺时针/逆时针）；

ctx.fillText("Hello!", 10, 50);绘制实心字体；

ctx.strokeText("Hello!", 10, 50);绘制空心字体；

每画完一条路径必须关闭：closePath；

每开始画一条路径或形状，必须开启：beginPath；

做动画时，经常使用ctx.clearRect(0,0,300,300);用来清除canvas的状态使之变透明，可以利用这点把多个canvas叠加，实现显示后面的canvas内容的功能；

未完待续。。

代码规范模块化

function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.fill();
}//每个function只做一类事情