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);

這樣就能夠了