canvas详解---矩形绘制

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

若是咱们使用了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);

这样就能够了