摘要：在位置處以寬為高為，清楚指定區(qū)域并使其完全透明。調(diào)用函數(shù)開(kāi)始一個(gè)路徑，調(diào)用函數(shù)結(jié)束一個(gè)路徑。端點(diǎn)是在選段邊緣處以線寬為長(zhǎng)以一半線寬為寬的矩形。

Canvas具有強(qiáng)大的繪圖功能，可以通過(guò)Javascript控制其上下文對(duì)象進(jìn)行繪圖。

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

fillRect(x,y,width,height);

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

strokeRect(x,y,width,height);

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

clearRect(x,y,width,height);

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

然后畫(huà)幾個(gè)矩形，代碼如下：

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

顯示結(jié)果如下：

在 Canvas 上下文中繪圖時(shí)可以利用所謂的繪圖堆棧狀態(tài)。每個(gè)狀態(tài)隨時(shí)存儲(chǔ) Canvas 上下文數(shù)據(jù)。下面是存儲(chǔ)在狀態(tài)堆棧的數(shù)據(jù)列表：

變換矩陣信息 。

當(dāng)前剪貼區(qū)域 。

畫(huà)布屬性當(dāng)前值 。

當(dāng)前路徑和當(dāng)前位圖受Canvas上下文控制，不屬于保存的狀態(tài)。

將一個(gè)繪圖狀態(tài)進(jìn)行壓棧和出棧有兩種方法，如下：

context.save() //保存當(dāng)前狀態(tài)到堆棧。

context.restore() //調(diào)出最后存儲(chǔ)的堆棧恢復(fù)畫(huà)布。

路徑可以用來(lái)在畫(huà)布上繪制任何形狀。路徑就是一系列點(diǎn)以及這些點(diǎn)之間的連線。Canvas上下文只能有一個(gè) “當(dāng)前” 路徑，當(dāng)調(diào)用context()方法時(shí)，不會(huì)將它存儲(chǔ)為當(dāng)前繪圖狀態(tài)的一部分。

路徑的上下文是一個(gè)重要概念，它決定了只能變換畫(huà)布上的當(dāng)前路徑。

調(diào)用beginPath()函數(shù)開(kāi)始一個(gè)路徑，調(diào)用closePath()函數(shù)結(jié)束一個(gè)路徑。

基本的路徑通過(guò)如下兩個(gè)方法控制：

moveTo()

lineTo()

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

lineCap 屬性。

定義上下文中線的端點(diǎn)，可以有以下三個(gè)值。

butt。 默認(rèn)值，端點(diǎn)是垂直于線段邊緣的平直邊緣。

round。 端點(diǎn)是在線段邊緣處以線寬為直徑的半圓。

square。端點(diǎn)是在選段邊緣處以線寬為長(zhǎng)、以一半線寬為寬的矩形。

lineJoin 屬性。

定義兩條線相交處產(chǎn)生的拐角，稱(chēng)為連接。在連接處創(chuàng)建一個(gè)填充三角形，可以使用lineJoin設(shè)置它的基本屬性。

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

bevel。連接處是一個(gè)對(duì)角線斜角。

round。連接處是一個(gè)圓。

線寬
lineWidth定義線的寬度（默認(rèn)值為10）。

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

畫(huà)一個(gè)簡(jiǎn)單的直線，代碼如下：

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

顯示結(jié)果如下：

有兩種函數(shù)可以繪制弧線，如下：

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

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

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

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

context.arcTo 方法要求當(dāng)前路徑至少有一個(gè)子路徑。

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

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

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

Canvas裁剪區(qū)域：

結(jié)合save()函數(shù)和restore函數(shù)，Canvas裁剪區(qū)域可以限制路徑及其子路徑的繪制區(qū)域，首先通過(guò)rect()函數(shù)設(shè)置一個(gè)用來(lái)繪圖的矩形區(qū)域，然后調(diào)用clip()函數(shù)把用rect（）函數(shù)定義的區(qū)域設(shè)置為裁剪區(qū)域。裁剪區(qū)域可以理解為繪圖操作的一種蒙版。