摘要：
HTML5規范已經完成了，互聯網上已經有數不清的站點使用了HTML5。從現在開始研究HTML5，本文是自己在學習canvas過程中的記錄，以備后需。
歷史：
這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。canvas標記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的原因在於，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 組件所使用，並且 Apple 希望有一種方式在 Dashboard 中支持腳本化的圖形。
瀏覽器：
從圖中可以看出IE9+都支持canvas。
API：
使用前，首先需要新建一個canvas網頁元素。如下：
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器版本太低，不支持canvas！ 3 </canvas>
如果瀏覽器不支持canvas標簽，頁面上就會顯示‘您的瀏覽器版本太低，不支持canvas！’。每個canvas元素都有一個方法--getContext方法，返回一個用於在畫布上繪圖的環境。
1 var canvas = document.getElementById('myCanvas'); 2 canvas.getContext(contextID);
參數：
參數 contextID 指定了您想要在畫布上繪制的類型。當前唯一的合法值是 "2d"，它指定了二維繪圖，並且導致這個方法返回一個環境對象，該對象導出一個二維繪圖 API。
返回值：
返回一個表示用來繪制的環境類型的環境。其本意是要為不同的繪制類型（2 維、3 維）提供不同的環境。當前，唯一支持的是 "2d"，它返回一個 CanvasRenderingContext2D 對象，該對象實現了一個畫布所使用的大多數方法。
在畫圖之前先講下坐標，每一個圖的原點坐標(0,0)在圖的左上角，x軸正方向水平向右，y軸正方向水平向下。
Demo：
1、線
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); // 開始 9 ctx.moveTo(20, 20); // 設置線的起點，坐標為(20,20) 10 ctx.lineTo(100, 100); // 設置線的終點，坐標為(100,100) 11 ctx.lineWidth = 5; // 設置線寬 12 ctx.strokeStyle = "#CC0000"; // 設置線的顏色 13 ctx.stroke(); // 進行線的着色 14 } 15 </script>
注意：moveTo和lineTo方法可以多次使用。最后可以用closePath方法，自動繪制一條當前點到起點的直線，形成一個封閉圖形，也可以使用一次lineto方法來封閉圖形。
2、三角形
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); //開始 9 ctx.lineWidth=3; //邊框的寬度 10 ctx.moveTo(0,350); //三角型的頂點 11 ctx.lineTo(100,250); //三角型的頂點 12 ctx.lineTo(200,300); //三角型的頂點 13 ctx.closePath(); //可選步驟，關閉繪制的路徑 14 ctx.strokeStyle = "#CC0000"; //設置線的顏色 15 ctx.stroke(); //邊着色 16 } 17 </script>
3、正方型
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.moveTo(10,10); 10 ctx.lineTo(100,10); 11 ctx.lineTo(100,100); 12 ctx.lineTo(10,100); 13 ctx.lineTo(10,10); 14 ctx.strokeStyle="#CC0000"; 15 ctx.lineWidth=3; 16 ctx.stroke(); 17 } 18 </script>
4、矩形
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.fillStyle = '#CC0000'; //設置矩形的填充色 9 ctx.fillRect(50, 50, 200, 100); //fillRect(x, y, width, height),矩形左上角頂點的x坐標、y坐標，以及矩形的寬和高 10 } 11 </script>
5、空心矩
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.lineWidth = 5; 9 ctx.strokeStyle="#CC0000"; 10 ctx.strokeRect(10,10,200,100); //strokeRect(x, y, width, height),矩形左上角頂點的x坐標、y坐標，以及矩形的寬和高 11 ctx.stroke(); 12 } 13 </script>
清楚填充矩形一部分
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.fillStyle = '#CC0000'; 9 ctx.fillRect(50, 50, 200, 100); 10 ctx.clearRect(100,50,50,50);//clearRect(x, y, width, height),清除矩形左上角頂點的x坐標、y坐標，以及矩形的寬和高 11 } 12 </script>
6、圓形
填充圓
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.arc(60, 60, 50, 0, Math.PI*2, true); //ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)x和y參數是圓心坐標，radius是半徑，startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示），anticlockwise表示做圖時應該逆時針畫（true）還是順時針畫（false） 10 ctx.fillStyle = "#CC0000"; 11 ctx.fill(); 12 } 13 </script>
空心圓
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.beginPath(); 9 ctx.arc(60, 60, 50, 0, Math.PI*2, true); 10 ctx.lineWidth = 5; 11 ctx.strokeStyle = "#CC0000"; 12 ctx.stroke(); 13 } 14 </script>
7、繪制文本
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.font = "Bold 20px 雅黑"; // 設置字體 9 ctx.textAlign = "left"; // 設置對齊方式 10 ctx.fillStyle = "#CC0000"; // 設置填充顏色 11 ctx.fillText("你好！", 10, 50); // fillText(string, x, y)文本內容、起點的x坐標、y坐標 12 ctx.strokeStyle = '#CC0000'; 13 ctx.strokeText("你好！", 10, 100); // 繪制空心字 14 } 15 </script>
注意：fillText和strokeText方法不支持文本斷行
8、漸變色
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var grd=ctx.createLinearGradient(0,0,170,0);// createLinearGradient(x1, y1, x2, y2)x1和y1是起點坐標，x2和y2是終點坐標。通過不同的坐標值，可以生成從上至下、從左到右的漸變等等。 9 grd.addColorStop(0,"black");// addColorStop(stop,color)stop介於 0.0 與 1.0 之間的值，表示漸變中開始與結束之間的位置。color在結束位置顯示的 CSS 顏色值 10 grd.addColorStop("0.3","magenta"); 11 grd.addColorStop("0.5","blue"); 12 grd.addColorStop("0.6","green"); 13 grd.addColorStop("0.8","yellow"); 14 grd.addColorStop(1,"red"); 15 ctx.fillStyle=grd; 16 ctx.fillRect(20,20,150,100); 17 } 18 </script>
圓形漸
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var grd=ctx.createRadialGradient(75,50,5,90,60,100);//createRadialGradient(x0,y0,r0,x1,y1,r1);x0漸變的開始圓的x坐標，y0 漸變的開始圓的y坐標，r0開始圓的半徑，x1漸變的結束圓的x坐標，y1漸變的結束圓的y坐標，r1結束圓的半徑 9 grd.addColorStop(0,"red"); 10 grd.addColorStop(1,"white"); 11 // Fill with gradient 12 ctx.fillStyle=grd; 13 ctx.fillRect(10,10,150,100); 14 } 15 </script>
邊框漸變
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 var gradient=ctx.createLinearGradient(0,0,170,0); 9 gradient.addColorStop("0","magenta"); 10 gradient.addColorStop("0.5","blue"); 11 gradient.addColorStop("1.0","red"); 12 13 // 用漸變進行填充 14 ctx.strokeStyle=gradient; 15 ctx.lineWidth=5; 16 ctx.strokeRect(20,20,150,100); 17 } 18 </script>
9、設置陰影
1 <canvas id="myCanvas" width="800" height="600"> 2 您的瀏覽器不支持canvas！ 3 </canvas> 4 <script> 5 var canvas = document.getElementById('myCanvas'); 6 if (canvas.getContext) { 7 var ctx = canvas.getContext('2d'); 8 ctx.shadowOffsetX = 10; // 設置水平位移 9 ctx.shadowOffsetY = 10; // 設置垂直位移 10 ctx.shadowBlur = 5; // 設置模糊度 11 ctx.shadowColor = "#cc2111"; // 設置陰影顏色 12 ctx.fillStyle = "#CC0000"; 13 ctx.fillRect(10,10,200,100); 14 } 15 </script>
附錄：
顏色、樣式和陰影
| 屬性 | 描述 |
|---|---|
| fillStyle | 設置或返回用於填充繪畫的顏色、漸變或模式 |
| strokeStyle | 設置或返回用於筆觸的顏色、漸變或模式 |
| shadowColor | 設置或返回用於陰影的顏色 |
| shadowBlur | 設置或返回用於陰影的模糊級別 |
| shadowOffsetX | 設置或返回陰影距形狀的水平距離 |
| shadowOffsetY | 設置或返回陰影距形狀的垂直距離 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 創建線性漸變（用在畫布內容上） |
| createPattern() | 在指定的方向上重復指定的元素 |
| createRadialGradient() | 創建放射狀/環形的漸變（用在畫布內容上） |
| addColorStop() | 規定漸變對象中的顏色和停止位置 |
線條樣式
| 屬性 | 描述 |
|---|---|
| lineCap | 設置或返回線條的結束端點樣式 |
| lineJoin | 設置或返回兩條線相交時，所創建的拐角類型 |
| lineWidth | 設置或返回當前的線條寬度 |
| miterLimit | 設置或返回最大斜接長度 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 創建矩形 |
| fillRect() | 繪制“被填充”的矩形 |
| strokeRect() | 繪制矩形（無填充） |
| clearRect() | 在給定的矩形內清除指定的像素 |
路徑
| 方法 | 描述 |
|---|---|
| fill() | 填充當前繪圖（路徑） |
| stroke() | 繪制已定義的路徑 |
| beginPath() | 起始一條路徑，或重置當前路徑 |
| moveTo() | 把路徑移動到畫布中的指定點，不創建線條 |
| closePath() | 創建從當前點回到起始點的路徑 |
| lineTo() | 添加一個新點，然后在畫布中創建從該點到最后指定點的線條 |
| clip() | 從原始畫布剪切任意形狀和尺寸的區域 |
| quadraticCurveTo() | 創建二次貝塞爾曲線 |
| bezierCurveTo() | 創建三次方貝塞爾曲線 |
| arc() | 創建弧/曲線（用於創建圓形或部分圓） |
| arcTo() | 創建兩切線之間的弧/曲線 |
| isPointInPath() | 如果指定的點位於當前路徑中，則返回 true，否則返回 false |
轉換
| 方法 | 描述 |
|---|---|
| scale() | 縮放當前繪圖至更大或更小 |
| rotate() | 旋轉當前繪圖 |
| translate() | 重新映射畫布上的 (0,0) 位置 |
| transform() | 替換繪圖的當前轉換矩陣 |
| setTransform() | 將當前轉換重置為單位矩陣。然后運行 transform() |
文本
| 屬性 | 描述 |
|---|---|
| font | 設置或返回文本內容的當前字體屬性 |
| textAlign | 設置或返回文本內容的當前對齊方式 |
| textBaseline | 設置或返回在繪制文本時使用的當前文本基線 |
| 方法 | 描述 |
|---|---|
| fillText() | 在畫布上繪制“被填充的”文本 |
| strokeText() | 在畫布上繪制文本（無填充） |
| measureText() | 返回包含指定文本寬度的對象 |
圖像繪制
| 方法 | 描述 |
|---|---|
| drawImage() | 向畫布上繪制圖像、畫布或視頻 |
像素操作
| 屬性 | 描述 |
|---|---|
| width | 返回 ImageData 對象的寬度 |
| height | 返回 ImageData 對象的高度 |
| data | 返回一個對象，其包含指定的 ImageData 對象的圖像數據 |
| 方法 | 描述 |
|---|---|
| createImageData() | 創建新的、空白的 ImageData 對象 |
| getImageData() | 返回 ImageData 對象，該對象為畫布上指定的矩形復制像素數據 |
| putImageData() | 把圖像數據（從指定的 ImageData 對象）放回畫布上 |
合成
| 屬性 | 描述 |
|---|---|
| globalAlpha | 設置或返回繪圖的當前 alpha 或透明值 |
| globalCompositeOperation | 設置或返回新圖像如何繪制到已有的圖像上 |
其他
| 方法 | 描述 |
|---|---|
| save() | 保存當前環境的狀態 |
| restore() | 返回之前保存過的路徑狀態和屬性 |
| createEvent() | |
| getContext() | |
| toDataURL() |