• Canvas

使用<canvas>對象,需要設置屬性：width，height。指定繪圖的區域大小。在canvas標簽前後出現的信息將在不支持<canvas>元素的瀏覽器中顯示出來。如下：

<canvas id="drawing" width="400" height="400">a drawing of something</canvas>

要在這塊畫布上繪圖，需要取得繪圖上下文。取得繪圖上下文對象的引用需要調用getContext()方法並傳入上下文的名字。傳入“2d” 取得2D上下文對象。

1 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
2
 
 <script type="text/javascript">
3     var drawing=document.getElementById("drawing");
4     if(drawing.getContext){     //檢測獲取繪圖上下文對象的方法是否存在
5         var context=drawing.getContext("2d");
6 
7     }
8 </script>

要導出<canvas>元素上繪制的圖像，可使用toDataURL()方法。參數為圖像的類型格式

 1 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
 2
 
 <script type="text/javascript">
 3     var drawing=document.getElementById("drawing");
 4     if(drawing.getContext){
 5         var imgURL=drawing.toDataURL("image/png");
 6         var image=document.createElement("img");
 7         image.src=imgURL;
 8         document.body.appendChild(image);
 
 9 
10     }
11 </script>

• 2D上下文

坐標開始於<canvas>元素的左上角，繪制簡單的2D圖形。

操作大多分為描邊和填充兩個操作，屬性為：fillStyle（填充），strokeStyle（描邊）.

• 繪制矩形（相關的方法：fillRect()，strokeRect()，clearRect() 清除畫布上的矩形區域）

 1 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
 2 <script type="text/javascript">
 3     var drawing=document.getElementById("drawing");
 4     if(drawing.getContext){
 5         /*var imgURL=drawing.toDataURL("image/png");
 6         var image=document.createElement("img");
 7         image.src=imgURL;
 8         document.body.appendChild(image);*/
 9         var context=drawing.getContext("2d");
10         context.fillStyle="red";
11         context.fillRect(10,10,50,50);
12         context.fillStyle="rgba(0,0,255,0.5)";
13         context.fillRect(30,30,50,50);
14 
15 
16     }
17 </script>

• 畫布上繪制路徑：首先調用beginPath()方法，表示要開始繪制新路徑，然後調用方法： arc(),arcTo(),lineTo(),moveTo(),quadraticCurveTo(),rect(), 最後創建路徑後選擇：closePath()方法，fill()，stroke()。

繪制時鐘：

 1 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
 2 <script type="text/javascript">
 3     var drawing=document.getElementById("drawing");
 4     if(drawing.getContext){
 5         var context=drawing.getContext("2d");
 6         context.beginPath();
 7         //繪制外圓
 8         context.arc(100,100,99,0,2*Math.PI,false);
 9         //繪制內圓
10         context.moveTo(194,100);
11         context.arc(100,100,94,0,2*Math.PI,false);
12         //繪制分針
13         context.moveTo(100,100);
14         context.lineTo(100,15);
15         //繪制時針
16         context.moveTo(100,100);
17         context.lineTo(35,100);
18         //描邊
19         context.stroke();
20     }
21 </script>

• 繪制文本：fillText()和strokeText() 四個參數：要繪制的文本字符，x坐標，y坐標，可選最大像素寬度。 屬性：font（文本樣式，大小，字體），textAlign（文本對齊方式），textBaseline（文本的基線）.

1         context.font="bold 14px Arial";
2         context.textAlign="center";
3         context.textBaseline="middle";
4         context.fillText("12",100,20);

變換：rotate()圍繞圓點旋轉角度，scale()縮放一定比例,translate()平移，transform，setTransform。

• 繪制圖像：把圖像繪制到畫布上，drawImage()方法。

1         var img=document.images[0];
2         context.drawImage(img,100,100);

• 陰影

shadowColor:陰影顏色。

shadowOffsetX:形狀或路徑x軸方向的陰影偏移量。

shadowOffsetX:形狀或路徑y軸方向的陰影偏移量。

shadowBlur：模糊像素數。

這些屬性通過context對象來修改。在繪制之前設置完成，能自動產生陰影。

Canvas繪圖 （html5新增特性）