首先，就上述绘制弧线的章节进行一个小小的补充；
如果我们使用了context.beginPath();紧接着后面的context.moveTo(x,y)，可以改为context.lineTo(x,y)效果是一样的；
好了，现在来开始我们这一章的内容了
编写一个绘制矩形的接口函数
<script type=text/javascript>
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);
这样就可以了