摘要：在位置處以寬為高為，清楚指定區域并使其完全透明。調用函數開始一個路徑，調用函數結束一個路徑。端點是在選段邊緣處以線寬為長以一半線寬為寬的矩形。

Canvas具有強大的繪圖功能，可以通過Javascript控制其上下文對象進行繪圖。

在Canvas上，繪制基本矩形有三種方式：填充、描邊、清楚。
三種API如下：

fillRect(x,y,width,height);

在位置（x,y）處以寬width、高為height繪制一個填充的矩形。

strokeRect(x,y,width,height);

在位置（x,y）處以寬width、高為height繪制一個矩形邊框，
需要使用當前的strokeStyle,lineWidth,lineJoin以及miterLimit設置。

clearRect(x,y,width,height);

在位置x,y處以寬為width,高為height，清楚指定區域并使其完全透明。

然后畫幾個矩形，代碼如下：

    function rect(x,y,w,h) {

        context.lineWidth = 2;
        context.strokeStyle = "#000000";
        context.strokeRect(x,y,w,h);
    }
    function manyrect() {
        var i=0,j=0;
        do {
            rect(i,j,250-4*i,250-4*j);
            i = i + 5;
            j = j + 5;
        }while (i<=125);
        context.fillStyle = "#000001";

顯示結果如下：

在 Canvas 上下文中繪圖時可以利用所謂的繪圖堆棧狀態。每個狀態隨時存儲 Canvas 上下文數據。下面是存儲在狀態堆棧的數據列表：

變換矩陣信息 。

當前剪貼區域 。

畫布屬性當前值 。

當前路徑和當前位圖受Canvas上下文控制，不屬于保存的狀態。

將一個繪圖狀態進行壓棧和出棧有兩種方法，如下：

context.save() //保存當前狀態到堆棧。

context.restore() //調出最后存儲的堆棧恢復畫布。

路徑可以用來在畫布上繪制任何形狀。路徑就是一系列點以及這些點之間的連線。Canvas上下文只能有一個 “當前” 路徑，當調用context()方法時，不會將它存儲為當前繪圖狀態的一部分。

路徑的上下文是一個重要概念，它決定了只能變換畫布上的當前路徑。

調用beginPath()函數開始一個路徑，調用closePath()函數結束一個路徑。

基本的路徑通過如下兩個方法控制：

moveTo()

lineTo()

直線還可以設置不同的屬性，具體如下：

lineCap 屬性。

定義上下文中線的端點，可以有以下三個值。

butt。 默認值，端點是垂直于線段邊緣的平直邊緣。

round。 端點是在線段邊緣處以線寬為直徑的半圓。

square。端點是在選段邊緣處以線寬為長、以一半線寬為寬的矩形。

lineJoin 屬性。

定義兩條線相交處產生的拐角，稱為連接。在連接處創建一個填充三角形，可以使用lineJoin設置它的基本屬性。

miter。默認值，在連接處邊緣延長相接。miterLimit是角長和線寬
所允許的最大比例（默認值為 10）。

bevel。連接處是一個對角線斜角。

round。連接處是一個圓。

線寬
lineWidth定義線的寬度（默認值為10）。

筆觸樣式
strokeStyle定義線和形狀邊框的顏色和樣式。

畫一個簡單的直線，代碼如下：

    function line() {
        context.lineWidth = 10;
        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(100,0);
        context.lineTo(100,100);
        context.stroke();
        context.closePath();
    }

顯示結果如下：

有兩種函數可以繪制弧線，如下：

context,arc(x,y,radius,startAngle,endAngle, anticlockwise);

x,y定義圓心的位置，radius定義弧線的半徑。startAngele和endAngle使用弧度值而不是角度值。anticlockwise可以是true或false這兩個值，用于定義弧線的方向。

context.arcTo(x1,y1,x2,y2,radius);

只有一些最新的瀏覽器支持arcTo方法，這個函數以給定的半徑繪制一條弧線，圓弧的起點與當前路徑的位置到（x1,y1）點的直線相切，圓弧的終點與(x1,y1)點到（x2,y2）的直線相切。

context.arcTo 方法要求當前路徑至少有一個子路徑。

貝塞爾曲線要比弧線靈活的多，它有立方和平方兩種形式，如下：

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)；

context.quadraticCurveTo(cpx,cpy,x,y);

Canvas裁剪區域：

結合save()函數和restore函數，Canvas裁剪區域可以限制路徑及其子路徑的繪制區域，首先通過rect()函數設置一個用來繪圖的矩形區域，然后調用clip()函數把用rect（）函數定義的區域設置為裁剪區域。裁剪區域可以理解為繪圖操作的一種蒙版。