canvas详解---矩形绘制

时间:2023-01-10 04:35:54

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

如果我们使用了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);

这样就可以了