canvas详解---矩形绘制

首先，就上述绘制弧线的章节进行一个小小的补充；

如果我们使用了context.beginPath();紧接着后面的context.moveTo(x,y)，可以改为context.lineTo(x,y)效果是一样的；

好了，现在来开始我们这一章的内容了

编写一个绘制矩形的接口函数

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

DrawRect(context,100,100,200,200,5,"red","blue");

function DrawRect(cxt,x,y,w,h,borderWidth,bordercolor,fillcolor)

{

cxt.lineWidth=borderWidth;

cxt.strokeStyle=bordercolor;

cxt.fillStyle=fillcolor;

cxt.beginPath();

cxt.moveTo(x,y);

cxt.lineTo(x+w,y);

cxt.lineTo(x+w,y+h);

cxt.lineTo(x,y+h);

cxt.lineTo(x,y);

cxt.closePath();

cxt.fill();

cxt.stroke();

}

其中这就是一个简单的绘制矩形的方法，我们注意一件事情，如果我们想给一个图像不仅要填充，还要绘制边框，那我们要先填充，后绘制边框，这样我们的边框才会正常显示。

其实canvas本身就自带绘制矩形的方法；

例如context.rect(x,y,w,h);

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

context.strokeStyle="red";

context.fillStyle="blue";

context.lineWidth=5;

context.beginPath();

context.rect(100,100,200,200);

context.closePath();

context.fill();

context.stroke();

这样也可以绘制出一个起点为（100,100），长和宽都是200的正方形。

这个地方我们可以看出context.rect(x,y,w,h)其实只是绘制了路径。具体操作还没有封装

但是除了上述方法以外。canvas还提供了正真的绘制矩形的方法，fillRect(x,y,w,h)和strokeRect(x,y,w,h);

context.strokeStyle="red";

context.fillStyle="blue";

context.lineWidth=5;

context.fillRect(100,100,200,200);

context.strokeRect(100,100,200,200);

这样就可以了