HTML5-Canvas 初认识

1. 理解canvas

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

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>

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

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

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

// 绘制路径(并没有画,只是状态的设置)
ctx.moveTo(100,100); // 移动点到 100 , 100
ctx.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);