HTML5中的Canvas元素

canvas元素是HTML5中新增的一個重要元素，專門用來繪制圖形，在頁面上放置一個canvas元素，就相當於在頁面上放置一塊“畫布”，可以在其中進行圖形的描繪。

canvas元素只是一塊無色透明的區域。需要利用JavaScript編寫在其中進行繪畫的腳本。從這個角度來說，您可以理解為類似於其它開發語言中的canvas畫布。

canvas元素要求至少設置width和height特性，以指定要創建的繪圖區域大小。任何在起始和結束標簽之間的內容是候選內容，它們當浏覽器不支持<canvas>元素的時候便會顯示。例如：

<canvasid="drawing"width="200"height="200">A drawing of something.</canvas>

和其它元素一樣，width和height他特性也可以作為DOM元素對象的屬性使用，可以在任何時刻更改。整個元素也可以使用CSS定義樣式。

開始在畫布上繪圖之前，要先取得繪圖的環境。canvas元素正式支持一個2D繪圖環境。繪圖環境的引用可以使用getContext()方法獲取，要傳入一個“2D”參數，如下：

var drawing = document.getElementById("drawing");//確保支持<canvas>if(drawing.getContext){var context = drawing.getContext("2d");//其它代碼}

當使用canvas元素時，一定要測試getContext()方法是否存在。有些浏覽器會為非正式的HTML元素創建默認的HTML元素對象。這種情況下，getContext()方法就不可用了，會造成腳本執行錯誤。

HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm

HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm

HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm

HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm

《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm

關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm

HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm

1.canvas繪制長方形

2D繪圖環境的原點（0，0）在元素的左上角，坐標值都是相對於該點計算的。默認情況下，width和height即寬和高，表示了在各方向上有多少個像素。

唯一的一個可以直接在2D繪圖環境中繪制的圖形就是長方形。長方形有三個方法：fillRect()、strokeRect()和clearRect()。三個方法都接受四個參數：長方形的x坐標、y坐標、寬和高。參數的單位是像素。

fillrect填充色彩是使用fillStyle屬性指定的，它一開始等於黑色（“#000000”）。可以將該屬性設置為以六位十六進制數指定的任意色彩，或者使用CSSrgb()或者rgba()格式。如下例：

var drawing = document.getElementById("drawing");//確保完全支持<canvas>if(drawing.getContext){var context = drawing.getContext("2d");
    context.fillStyle ="#EEEEFF";
    context.fillRect(0,0,200,200);//繪制一個紅色的長方形
    context.fillStyle ="#ff0000";
    context.fillRect(10,10,50,50);//繪制一個半透明的藍色長方形
    context.fillStyle ="rgba(0, 0, 255, 0.5)";
    context.fillRect(30,30,50,50);}

該代碼首先將fillStyle設置為紅色，然後在（10，10）繪制了一個50像素高和寬的長方形。然後，又使用rgba()格式將fillStyle設為一個半透明的藍色，並畫了另一個長方形覆蓋了第一個。結果可以看到紅色和藍色長方形中間接在一起。

strokeRect()方法使用由strokeStyle屬性指定的顏色繪制了一個長方形外框。和fillStyle屬性一樣，strokeStyle默認為“#000000”，並可以使用十六進制值、rgb()或者rgba()設置。如下例：

var drawing = document.getElementById("drawing");//確保完全支持<canvas>if(drawing.getContext){var context = drawing.getContext("2d");//填充畫布
    context.fillStyle ="#EEEEFF";
    context.fillRect(0,0,200,200);//繪制一個紅色的長方形邊框
    context.strokeStyle ="#ff0000";
    context.strokeRect(10,10,50,50);//繪制一個半透明的藍色長方形邊框
    context.strokeStyle ="rgba(0, 0, 255, 0.5)";
    context.strokeRect(20,30,50,50);}

這段代碼也繪制了兩個重疊的長方形；不過，都只是邊框而不是填充的長方形。

畫筆的大小是由lineWidth屬性控制的，可以設置為任意整數。類似還有，lineCap屬性描述了在線段終點所使用的形狀（“butt”、“round”或者“square”），lineJoin表示線段如何連接（“round”、“bevel”或“miter”）。

可以使用clearRect()方法清除畫布的一塊區域。該方法用於讓一塊繪圖環境變透明。通過繪制圖形然後清除指定區域，就可以創建有趣的效果，比如切掉另一個形狀的一部分。如下例：

var drawing = document.getElementById("drawing");//確保完全支持<canvas>if(drawing.getContext){var context = drawing.getContext("2d");//填充畫布
    context.fillStyle ="#EEEEFF";
    context.fillRect(0,0,200,200);//繪制一個紅色的長方形
    context.fillStyle ="#ff0000";
    context.fillRect(10,10,50,50);//繪制一個半透明的藍色長方形
    context.fillStyle ="raba(0, 0, 255, 0.5)";
    context.fillRect(30,30,50,50);//創建一個覆蓋前面長方形的長方形
    context.clearRect(40,40,10,10);}

這裡有兩個填充的相互覆蓋的長方形，然後另一個小長方形清除了中間的覆蓋區域。

2.canvas繪制路徑

2D繪圖環境支持一些在畫布上繪制路徑的方法，可以創建復雜的形狀和線條。要開始創建路徑，必須首先調用beginPath()表示新路經開始。然後，可以調用以下方法創建路徑。

• arc(x,y,radius,startAngle,endAngleanticlockwise)——繪圖中心點在（x,y）的弧，半徑為radius,角度在startAngle和endAngle(單位是弧度)之間。最後一個參數是一個布爾值，表示startAngle和endAngle是逆時針方向計算還是順時針方向計算。
• arcTo(x1,y1,x2,y2,radius)——繪制從上一個點到（x2,y2）的弧，經過（x1,y1），半徑為radius。
• bezierCurveTo(c1x,c1y,c2x,c2y,x,y)——使用控制點（c1x,c1y）和（c2x,c2y）從最後一點到點（x,y）繪制一條曲線。
• lineTo(x,y)——從最後一點到點（x,y）繪制一條直線。
• moveTo(x,y)——將光標移動到點（x,y）而不繪制線條。
• quadraticCurveTo(xx,cy,x,y)——使用控制點（cx,cy）從最後一點繪制一條二次曲線到點（x,y）。
• rect(x,y,width,height)——在點（x,y）繪制一個長width和寬height的矩形。與strokeRect()和fillRect()不一樣的是，這個函數創建一個路徑而不是單獨的形狀。

一旦創建好路徑之後，還可以調用fill()方法用fillStyle填充色。另外一個選項調用stroke()方法對路徑描邊，使用strokeStyle()。最後一個選項是調用clip()，根據路徑創建一個裁剪區域。

請看下面繪制一個鐘（不帶數字）的例子：

var drawing = document.getElementById("drawing");//確保完全支持（canvas）if(drawing.getContext){var context = drawing.getContext("2d");//填充畫布
    context.fillStyle ="#EEEEFF";
    context.fillRect(0,0,200,200);//路徑開始
    context.beginPath();//繪制外圓
    context.arc(100,100,99,0,2*Math.PI,false);//繪制內圓
    context.moveTo(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);//繪制分針
    context.moveTo(100,100);
    context.lineTo(100,15);//繪制時針
    context.moveTo(100,100);
    context.lineTo(35,100);//路徑描邊
    context.stroke();}

這個例子使用arc()繪制了兩個圓：內外各一，用於創建鐘的邊框。外圓半徑為99像素，中心在（100，100），也就是畫布的中心。要繪制一個完整的圓，必須起始於0度角，畫整一圈至2π個弧度（使用Math.PI進行計算）。在繪制內圓之前，路徑必須移動到一個圓所在的新點，以面繪制額外的線條。第二次調用arc()使用了縮小的半徑以到達邊框效果。之後，組合使用moveTo()和lineTo()繪制了時針和分針。最後一步是調用stroke()，讓圖形顯示。

路徑是2D繪圖環境的主要繪制機制，因為它們讓開發人員能更好地控制要畫什麼。由於路徑使用頻繁，還有個方法叫做isPointInPath()，接受一個x坐標和y坐標作為參數。該方法可以在路徑關閉之前任意時間點調用，來判斷某個點是否在於路徑之上，如下所示：

if(context.isPointInPath(100,100)){
    alert("Point(100, 100) is in the path.");}

2D繪圖環境的路徑API十分強健，足夠使用多種填充樣式、畫筆樣式和其它樣式創建復雜的圖形。

更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2014-06/102817p2.htm