canvas不过如此（一） canvas不过如此（一）

两个月canvas画板第一版终于到了测试阶段，也有时间总结记录下canvas。半路出家面向MDN从0摸索了一段时间，希望看完这个系列能和大家共勉。什么是canvas? 作为html5的新标签，canvas使得开发者可以通过脚本语言在HTML绘制图形。正是因为绘制图形的功能，我们可以用来开发小游戏、压缩图片等，可以替代即将被淘汰的flash。开始绘画

//获取页面节点，渲染页面上下文 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);