4.1　使用canvas

視頻講解

在HTML5文檔中，使用<canvas>標簽可以在網頁中創建一塊畫布，用法如下所示：

    <canvas id="myCanvas" width="200" height="100"></canvas>

該標簽包含三個屬性：

　id：用來標識畫布，以方便JavaScript腳本對其引用。

　width：設置canvas的寬度。

　height：設置canvas的高度。

在默認情況下，canvas創建的畫布大小為寬300像素、高150像素，可以使用width和height屬性自定義其寬度和高度。

注意，與<img>不同，<canvas>需要結束標簽</canvas>。如果結束標簽不存在，則文檔的其余部分會被認為是替代內容，將不會顯示出來。

【示例1】可以使用CSS控制canvas的外觀。例如，在下面示例中使用style屬性為canvas元素添加一個實心的邊框，在瀏覽器中的預覽效果如圖4.1所示。

    <canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>

使用JavaScript可以在canvas畫布內繪畫，或設計動畫。具體步驟如下：

【操作步驟】

第1步，在HTML5頁面中添加<canvas>標簽，設置canvas的id屬性值以便JavaScript調用。

    <canvas id="myCanvas" width="200" height="100"></canvas>

第2步，在JavaScript腳本中使用document.getElementById()方法，根據canvas元素的id獲取對canvas的引用。

    var c=document.getElementById("myCanvas");

第3步，通過canvas元素的getContext()方法獲取畫布上下文（context），創建context對象，以獲取允許進行繪制的2D環境。

    var context=c.getContext("2d");

getContext("2d")方法返回一個畫布渲染上下文對象，使用該對象可以在canvas元素中繪制圖形，參數“2d”表示二維繪圖。

第4步，使用JavaScript進行繪制。例如，使用以下代碼可以繪制一個位于畫布中央的矩形。

    context.fillStyle="#FF00FF";
    context.fillRect(50,25,100,50);

這兩行代碼中，fillStyle屬性定義將要繪制的矩形的填充顏色為粉紅色，fillRect()方法指定了要繪制的矩形的位置和尺寸。圖形的位置由前面的canvas坐標值決定，尺寸由后面的寬度和高度值決定。在本例中，坐標值為（50,25），尺寸為寬100像素、高50像素，根據這些數值，粉紅色矩形將出現在畫面的中央。

【示例2】下面給出完整的示例代碼。

以上代碼在瀏覽器中的預覽效果如圖4.2所示。在畫布周圍加了邊框是為了更能清楚地看到中間矩形位于畫布的什么位置。

圖4.1　為canvas元素添加實心邊框

圖4.2　使用canvas繪制圖形

fillRect(50,25,100,50)方法用來繪制矩形圖形，它的前兩個參數用于指定繪制圖形的x軸和y軸坐標，后面兩個參數設置繪制矩形的寬度和高度。

在canvas中，坐標原點（0,0）位于canvas畫布的左上角，x軸水平向右延伸，y軸垂直向下延伸，所有元素的位置都相對于原點進行定位，如圖4.3所示。

圖4.3　canvas默認坐標點

目前，IE 9+、Firefox、Opera、Chrome和Safari版本瀏覽器均支持canvas元素及其屬性和方法。

老版本瀏覽器可能不支持canvas元素，因此在特定用戶群中，需要為這些瀏覽器提供替代內容。只需要在<canvas>標簽內嵌入替代內容，不支持canvas的瀏覽器會忽略canvas元素，而顯示替代內容；支持canvas的瀏覽器則會正常渲染canvas，而忽略替代內容。例如：