HTML5之Canvas標籤簡要學習

    HTML5 提供了畫布（canvas）標籤，通過與Javascript結合使用，可以在網頁上繪製映像。Canvas是一個矩形地區，使用Javascript可以控制其每一個像素。本文將對canvas標籤進行簡要的學習。

1、canvas標籤說明

    canvas標籤是一個矩形地區，它包含兩個屬性width和height，分別表示矩形地區的寬和高，這兩個屬性都是可選的，並且都可以通過css來設定，他們的預設值是300px和150px。canvas在網頁中的形式如下：

<canvas id="myCanvas" width=”300” height=”200” style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>

 解析：

為canvas設定id屬性是便於Javascript調用；

第二行是當瀏覽器不支援canvas標籤時，將顯示這行文字。

 

2、檢測瀏覽器支援

Canvas標籤並沒有得到目前所有瀏覽器的支援，因此在使用canvas繪圖的時候，要先檢測用戶端瀏覽器是否支援。下面的樣本將通過Javascript判斷瀏覽器是否支援：

<canvas id="myCanvas" width=”300” height=”200” style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">    var myCanvas = document.getElementById("myCanvas");    if (!myCanvas.getContext)    {        alert("Your browser does not support the canvas element.");    }    else    {        // do something here    }</script>

解析：

上面的Javascript代碼通過判斷getContext方法是否為空白來判斷瀏覽器是否支援canvas標籤。

 

3、繪製線條和圖案

    在沒有canvas之前，想要在網頁上面繪製線條或圖案，是非常麻煩且不相容的。我曾在《js畫直線》一文中轉載了網路上常用的在IE和FF中繪製線條的方法，但如果想要這些方法通用，則是不可能的。但現在有了canvas標籤，一切就變得簡單了。

    現在，你只需要在頁面上添加canvas標籤，並通過Javascript調用它的相應方法，就可以輕鬆的在頁面上繪製線條和圖案。

//繪製線條

<canvas id="myCanvas"  style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">    var myCanvas = document.getElementById("myCanvas");    if (!myCanvas.getContext)    {        alert("Your browser does not support the canvas element.");    }    else    {        var myContext = myCanvas.getContext("2d");        myContext.moveTo(200, 150);        myContext.lineTo(100, 100);        myContext.lineTo(200, 50);        myContext.strokeStyle = "#FF0000";        myContext.lineWidth = 4;        myContext.stroke();    }   </script>

解析：

顯示在頁面中放置了一個canvas標籤，設定id、width、height等屬性，並為這個標籤設定邊框。

在Javascript中檢測瀏覽器是否支援

當瀏覽器支援的時候開始調用getContext方法獲得繪圖的上下文（這地方很像vc中的GDI繪圖~~），目前只提供了2D上下文，將來還有可能支援OpenGL ES的3D上下文。

moveTo方法是將當前位置移動到指定的座標

lineTo方法是向指定的左邊繪製直線

strokeStyle 屬性是指定線條的顏色，在本例子中指定為紅色

lineWidth 屬性設定線條的粗細，這裡設定為4px

stroke方法則是將直線顯示出來。貌似是之前只是規定了哪裡有線條，並沒有顯示，當調用這個方法後，線條才可以顯示。

 

// 繪製圖案

 

<canvas id="myCanvas" width="300" height="200"  style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">    var myCanvas = document.getElementById("myCanvas");    if (!myCanvas.getContext)    {        alert("Your browser does not support the canvas element.");    }    else    {        var myContext = myCanvas.getContext("2d");        myContext.fillStyle = "rgb(200,0,0)";        myContext.fillRect(10, 10, 55, 50);        myContext.fillStyle = "rgba(0, 0, 200, 0.5)";        myContext.fillRect(30, 30, 55, 50);        myContext.fillRect(100, 0, 150, 50);        myContext.strokeRect(100, 60, 150, 50);        myContext.clearRect(130, 10, 90, 30);    }</script>

解析：

直接到fillStyle屬性，之前的代碼是相同的，不再贅言。

fillStyle屬性設定了填充的顏色、透明度等，如果設定為"rgb(200,0,0)"，則表示一個顏色，不透明；如果設定為"rgba(0,0,200,0.5)"，則表示顏色為rgb(0,0,200)，透明度為50%，

fillRect方法是繪製一個矩形，這個矩形地區沒有邊框，只有填充色。這個方法有四個參數，前兩個表示左上方的座標位置，第三個參數為長度，第四個參數為高度。

strokeRect方法繪製一個帶邊框的矩形。該方法的四個參數的解釋同上。

clearRect方法是清除一個矩形地區，被清除的地區將沒有任何線條。該方法的四個參數的解釋同上。

 

4、繪製路徑

    路徑是繪製自訂圖形的好方法，在canvas中通過beginPath()方法開始繪製路徑，這個時侯你就可以繪製直線、曲線等，繪製完成後調用fill()和stroke()完成填充和設定邊框，通過closePath()方法結束路徑的繪製。下面的例子講演時如何繪製路徑：

<canvas id="myCanvas" width="300" height="200"  style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">    var myCanvas = document.getElementById("myCanvas");    if (!myCanvas.getContext)    {        alert("Your browser does not support the canvas element.");    }    else    {        var myContext = myCanvas.getContext("2d");                myContext.fillStyle = '#0000ff';        myContext.strokeStyle = '#ff0000';        myContext.lineWidth = 2;                myContext.beginPath();                myContext.moveTo(30, 30);        myContext.lineTo(150, 30);        myContext.lineTo(150, 120);        myContext.lineTo(90, 100);        myContext.lineTo(120, 60);        myContext.lineTo(30, 30);                myContext.fill();        myContext.stroke();                myContext.closePath();    }

解析：

在獲得渲染上下文後，設定了填充色、邊框色和邊框寬度。

調用beginPath()方法開始繪製路徑

通過lineTo()方法繪製一個閉合的自訂圖形

調用fill()方法進行填充

調用stroke()方法設定邊框

調用closePath()方法結束路徑的繪製