Canvas繪圖 （html5新增特性）

標籤：begin   oda   縮放   繪製映像   pen   相關   pre   element   顯示   

• 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新增特性）