上回我們了解了線條，由線→面，今天我們來說**矩形**
畫矩形之前呢，我們先思考如何才能畫乙個矩形？很簡單，就是四條線段湊到一起，圍成乙個面，那麼我們在寫的時候是不是真的要畫四條直線呢？當然不要---確定初始位置，改變終點位置，三次就好。
備註：一下我們畫圖形，都是按照順時針畫的喲。
還是按照我們之前學畫直線的方法：
獲取元素mycanvas
呼叫方法:getcontext("2d");
開始路徑:ele.beginpath();
確定起點位置:ele.moveto(x,y);
終點位置(至少三個，才能圍成矩形)。:ele.lineto(x,y);
(設定相關樣式--線寬、線的顏色可以根據自己喜好)
渲染圖形：ele.stroke();(必須的)。
封閉圖形:ele.closepath();//這個close與begin沒有關係，知識為了形成閉合圖形（其實就是為了少寫乙個lineto(終點即原點x,終點即原點y);)
完成了上述步驟，乙個矩形就畫好了。那麼我們來做乙個小練習，
實現下圖效果：
![螢幕快照 2017-12-27 下午8.20.27.png](
```var mycanvas = document.getelementbyid("mycanvas");
var context = mycanvas.getcontext("2d");
var arr = ["red","blue","yellow","pink"];
for (var i = 0;icontext.moveto(num,num);
context.lineto(200+num,num);
context.lineto(200+num,80+num);
context.lineto(num,80+num);
context.fillstyle = arr[i];
context.fill();
}```
到這裡我們的練習就完成了。
這裡就要說說兩種**不同的方法**畫出來的**不同效果**的矩形：
* 鏤空矩形:用到stroke();
```context.beginpath();
context.moveto(30,30);
context.lineto(200+30,30);
context.lineto(200+30,80+30);
context.lineto(30,80+30);
//這裡就看出來context.closepath();的重要性了，不加為圖1，加了才為圖2，
context.closepath();
context.strokestyle = 'red';
context.stroke();
```圖1：
;
```context.beginpath();
context.moveto(30,30);
context.lineto(200+30,30);
context.lineto(200+30,80+30);
context.lineto(30,80+30);
//既然是實心的，那麼closepath();方法就不用了
context.fillstyle = 'red';
context.fill();
```結果如圖3：,以及rect();
* fillrect();
```context.beginpath();
context.fillstyle = "red";
//四個引數分別是(位於x軸座標，位於y軸座標，width，height);
context.fillrect(100,100,200,150);
```* rect();
```context.beginpath();
context.fillstyle = "red";
//引數和fillrect();一樣
context.rect(100,100,200,150);
context.fill();
```至於得到的結果：效果都如圖3所示。
那提到了rect();就不得不說乙個方法：**ispointinpath(x,y);**
加入我們要判斷某個點是不是在我們所畫的圖形內部，就可以呼叫該方法,知識這個方法有一定的限制：
```//只有通過context.rect(0,0,50,50);畫出來的圖形才能進行判斷，
//但是context.fillrect(20,20,100,100);畫出來的圖形不能進行判斷
if(context.ispointinpath(51,51))else
```一定要注意哦：使用該方法，只能判斷當前所處的位置是否在圖形內。
再來乙個小效果：繪製**簡易棋盤** :
先看看效果：![螢幕快照 2017-12-27 下午9.02.21.png](
**如下：
``` var mycanvas = document.getelementbyid("mycanvas");
var context = mycanvas.getcontext("2d");
var color = "";
for (var i=0;i<8;i++)
else
context.beginpath();
context.fillstyle = color;
context.fillrect(0+j*50,0+i*50,50,50);}}
```
Canvas繪製矩形
context.rect x y width height 規劃了矩形的路徑 context.fillrect x y width height 根據fillstyle繪製出乙個填充的矩形 context.strokerect x y width height 根據strokestyle繪製出乙個矩...
canvas繪製矩形
1.繪製乙個填充的矩形 fillrect x,y,width,height 2.繪製乙個矩形的邊框 strokerect x,y,width,height 3.清除指定矩形區域，讓清除部分完全透明 clearrect x,y,width,height 其中x y是相對於畫布左上角0,0 的距離，wi...
Canvas 元素繪製矩形
使用canvas元素，必須先設定 width 和 height 屬性，指定可以繪圖的區域大小。要在這塊畫布上繪圖，需要取得繪圖上下文。而取得繪圖上下文物件的引用，需要呼叫 getcontext 方法並傳入上下文的名字。傳入 2d 就可以取得2d上下文物件。與矩形相關的方法包括 fillrect st...