canvas不过如此（一）

两个月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()终点或过程点

当上面这些牢记于心，也算是入门，但并不意味着canvas已经全部了解（当初我也觉得不过如此）。作为入门篇就简单带过下，下周会更一篇在实际开发中绘制椭圆的多种方法。

github传送门