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

這樣就可以了