HTML5 canvas元素隨其而來的編程接口Canvas API應用前景極為廣闊。簡單地說，canvas元素能夠在網頁中創建一塊矩形區域，這塊矩形區域可以稱為畫布，這其中可以繪制各種圖形。 <canvas></canvas>是HTML5出現的新標簽，像所有的dom對象一樣它有自己本身的屬性、方法和事件，其中就有繪圖的方法，js能夠調用它來進行繪圖 。
1、在頁面中添加canvas元素
如果要向頁面中添加canvas元素，可以使用下面的代碼。默認情況下，Canvas所創建的矩形區域大小為寬300px,高150px，也可以使用width和height屬性來自定義其寬度和高度。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="200"></canvas></body></html> 以上代碼只是簡單地創建了一個Canvas對象，在瀏覽器中打開的頁面上什么都不會顯示。可以通過使用border屬性來給canvas設置邊框樣式。代碼如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="200" style="border: 2px solid blue"></canvas></body></html>效果如下：2、Canvas如何繪制圖形
在了解Canvas如何繪制圖形前，我們先初步了解幾個名次概念。
1）context：context是一個封裝了很多繪圖功能的對象，獲取這個對象的方法是
var context =canvas.getContext("2d");//2d表示的是html5目前只能支持2d，而不能提供3d顯示
2）canvas元素繪制圖像的時候有兩種方法，分別是
context.fill()//填充
context.stroke()//繪制邊框
3）style:在進行圖形繪制前，要設置好繪圖的樣式
context.fillStyle//填充的樣式
context.strokeStyle//邊框樣式
4）顏色的表示方式:
直接用顏色名稱:"red" "green" "blue"
十六進制顏色值: "#EEEEFF"
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255,透明度)
canvas本身并不能實現圖形繪制功能，繪制圖形的工作需要有javaScript完成。使用Javascript可以在canvas元素內部添加線條、圖片和文字，也可以在其中繪畫，還可以加入高級動畫。接下來說一下具體的繪制圖形步驟：第一步：在HTML5頁面中添加canvas元素，必須定義canvas元素的id屬性值以便接下來調用。
<canvas id="myCanvas" width="200" height="200" style="border: 2px solid blue"></canvas>第二步：使用id尋找canvas元素。在JavaScript中可以通過document.getElementById()方法找到canvas元素。var myCanvas = document.getElementById("myCanvas");第三步：通過canvas元素的getContext()方法來獲取上下文（Context），即創建Context對象以獲取允許進行繪制的2D環境。var cxt=canvas.getContext("2d");第四步：使用JavaScript繪制圖形。例如，使用一下代碼可以繪制一個位于畫布中央的矩形。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="100" style="border: 2px solid #34b1ff"></canvas><script> var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.fillStyle="#34b1ff"; cxt.fillRect(50,25,100,50);</script></body></html>效果：
3、檢測瀏覽器是否支持
根據W3c上的定義，可以知道目前canvas的瀏覽器支持情況如下：
那么我們在不知道瀏覽器版本的情況下，要如何顯示呢？除了可以通過在不支持canvas的瀏覽器中顯示替代文本之外，我們還可以使用JavaScript腳本來 檢測瀏覽器是否支持canvas，方法是判斷getContext函數是否存在。JavaScript代碼如下：
var canvas = document.getElementById("myCanvas"); if(canvas.getContext){ alert("您的瀏覽器支持Canvas.") }else{ alert("您的瀏覽器不支持Canvas.") }4、繪制簡單圖形我們可以看到很多canvas實現的特效，效果非常好。不過，正所謂“萬丈高樓平地起”，所有的事物都要從最簡單最基礎的部分開始筑建，我們先從最簡單的直線、矩形和圓形開始繪制。
1）繪制直線
繪制直線時需要調用3個方法：moveTo()、lineTo()、stroke().
moveTo()方法用于建立新的子路徑，并規定其起始點為（x,y）。lineTo()方法用于從moveTo（）方法規定的起始點開始繪制一條道規定坐標的直線，如果前面沒有用moveTo（）方法規定子路徑的起始點，則lineTo（）方法等同于moveTo（）方法。stroke()方法用于沿該路徑繪制一條直線。示例代碼如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="100" style="border: 2px solid #ff54c5"> 您的瀏覽器不支持.</canvas><script> var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.strokeStyle="#ff54c5"; cxt.moveTo(0,0); cxt.lineTo(200,100); cxt.stroke();</script></body></html>效果：2）繪制矩形 繪制矩形有兩種方法，一種是用顏色填充矩形區域，一種是用線條繪制矩形輪廓。其中用到的方法分別是fillRect()和strokeRect()，而且為圖形指定顏色提供了兩個屬性，即fillStyle和strokeStyle，前者用于要填充的顏色，后者是線條顏色。示例1代碼如下（填充）：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="100" style="border: 2px solid #34b1ff"></canvas><script> var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.fillStyle="#34b1ff"; cxt.fillRect(0,0,100,50);</script></body></html>效果：
示例2代碼如下（線條）：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="100" style="border: 2px solid #66d3ff"></canvas><script> var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.strokeStyle="#66d3ff"; cxt.strokeRect(0,0,100,50);</script></body></html>效果：
3）繪制圓形
圓形的繪制仍然是采用繪制路徑并填充顏色的方法。在繪制圓形的過程中，用到了4個比較關鍵的方法，beginPath()、arc()、closePath()和fill()。
beginPath()方法用于開始繪制路徑，closePath()方法用于結束繪制路徑。調用beginPath()方法后，在Canvas中進行一系列圓形的繪制，繪制完成后，應該調用closePath()方法將圖形閉合起來。arc()方法本意為繪制弧線，當采用適當的參數后，即可繪制圓形。在這個方法中，具體的方法為：arc(x,y,radius,startAngle,engAngle,anticlockwise)，一共有6個參數，參數中的x,y為起點坐標，radius為圓形的半徑，startAngle為開始的角度，endAngle為結束的角度，anticlockwise為是否按照順時針方向進行繪制。示例代碼如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 canvas</title></head><body><canvas id="myCanvas" width="200" height="200"></canvas><script> var canvas = document.getElementById("myCanvas"); var cxt=canvas.getContext("2d"); cxt.fillStyle="#66d3ff"; cxt.beginPath(); cxt.arc(100,100,75,0,Math.PI*2,true); cxt.closePath(); cxt.fill();</script></body></html>效果：當然，也可以像畫矩形一樣，采用線條輪廓的方式，采用stroke()方法，顏色相對應地采用strokeStyle()方法。
新聞熱點
疑難解答
