1. 理解canvas

canvas其实是HTML5中一个新增加的标签，对于canvas标签本身并没有什么非常强大的属性（width、height、id、class、style），仅仅作为一个画布存在，只能使用js获取canvas绘图上下文环境（也就是获取CanvasRenderingContext2D对象啦）。下面用一段小程序来描述：

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d"); // 获取CanvasRenderingContext2D对象

对于上述的CanvasRenderingContext2D对象，其实才是具有绘图本领，它拥有HTML5绘图的API，所以canvas绘图仅仅是操作CanvasRenderingContext2D对象罢了。

2. 使用CanvasRenderingContext2D对象来画一条直线

// 绘制路径(并没有画,只是状态的设置)ctx.moveTo(100,100); // 移动点到 100 , 100ctx.lineTo(200,200); // 连接上一个点到 200 , 200// 用线条根据状态中路径(进行绘图)ctx.stroke();

因为canvas是基于状态的绘图，所以在绘制所有路径之前，还可以设置一些其他状态参数，比如直线还可以设置 lineWidth， strokeStyle 等属性。

ctx.lineWidth = 10; // 线条宽度ctx.strokeStyle = 'blue'; // 线条颜色ctx.moveTo(100,100);ctx.lineTo(200,200);ctx.stroke();

3. beginPath() 和 closePath() 的使用

由于canvas是基于状态的绘制，所以如果不指定beginPath()，每次调用绘制函数stroke都会将canvas所有的路径进行重新绘制，而达不到我们想要的效果，下面是一段beginPath()的使用的小程序：

ctx.lineWidth = 10; ctx.beginPath(); // 进行一次全新的绘制ctx.moveTo(50,50); // == ctx.lineTo(50,50);ctx.lineTo(100,100);ctx.strokeStyle = 'red';ctx.stroke();ctx.beginPath(); // 进行一次全新的绘制ctx.moveTo(60,60);ctx.lineTo(120,120);ctx.strokeStyle = 'green';ctx.stroke();ctx.beginPath(); // 进行一次全新的绘制ctx.moveTo(70,70);ctx.lineTo(140,140);ctx.strokeStyle = 'blue';ctx.stroke();

其实在canvas绘图中，最好的方式是将绘制路径的函数放在beginPath()和closePath()之间，beginPath表示进行一次全新的绘制，closePath表示当前绘制的图形应该封闭并且结束。它们成对的出现主要是来绘制一些封闭的图形。

ctx.lineWidth = 10;ctx.beginPath();ctx.moveTo(50,50);ctx.lineTo(100,100);ctx.closePath(); // 封闭当前路径，并且结束ctx.strokeStyle = 'red';ctx.stroke();ctx.beginPath();ctx.moveTo(60,60);ctx.lineTo(120,120);ctx.closePath(); // 封闭当前路径，并且结束ctx.strokeStyle = 'green';ctx.stroke();ctx.beginPath();ctx.moveTo(70,70);ctx.lineTo(140,140);ctx.closePath(); // 封闭当前路径，并且结束ctx.strokeStyle = 'blue';ctx.stroke();

4. 填充一个封闭图形使用fill()和fillStyle

ctx.lineWidth = 10;ctx.beginPath();ctx.moveTo(50,50);ctx.lineTo(100,100);ctx.closePath();ctx.strokeStyle = 'red';ctx.stroke();ctx.beginPath();ctx.moveTo(60,60);ctx.lineTo(120,120);ctx.closePath();ctx.strokeStyle = 'green';ctx.stroke();ctx.beginPath();ctx.moveTo(70,70);ctx.lineTo(140,140);ctx.closePath();ctx.strokeStyle = 'blue';ctx.stroke();ctx.fillStyle = 'yellow'; // 填充颜色ctx.fill(); // 填充绘制

上述程序其实是错误的，正确的程序应该是先填充绘制在进行stroke操作。

ctx.lineWidth = 10;ctx.fillStyle = 'yellow';ctx.beginPath();ctx.moveTo(50,50);ctx.lineTo(100,100);ctx.closePath();ctx.fill();ctx.strokeStyle = 'red';ctx.stroke();ctx.beginPath();ctx.moveTo(60,60);ctx.lineTo(120,120);ctx.closePath();ctx.fill();ctx.strokeStyle = 'green';ctx.stroke();ctx.beginPath();ctx.moveTo(70,70);ctx.lineTo(140,140);ctx.closePath();ctx.fill();ctx.strokeStyle = 'blue';ctx.stroke();

5. 矩形

由于矩形是非常常用的一种图形，所以canvas提供一个api可以快速进行矩形的绘制(rect(x,y,width,height)函数)。

// 画一个矩形// ctx.moveTo(x,y);// ctx.lineTo(x+width,y);// ctx.lineTo(x+width,y+height);// ctx.lineTo(x,y+height);ctx.rect(x,y,width,height); // 建立路径

其实还有更加方便的方法：fillRect(x,y,width,height) 和 strokeRect(x,y,width,height)，这两个方法不但进行建立矩形路径还进行矩形的绘制

// ctx.beginPath();// ctx.rect(x,y,width,height);// ctx.closePath();// ctx.stroke(); | ctx.fill();ctx.strokeRect(x,y,width,height); | ctx.fillRect(x,y,width,height);