html5-Canvas可以在web中繪製各種圖形_html5教學技巧

在html5中我覺得最重要的就是引入了Canvas，使得我們可以在web中繪製各種圖形。給人感覺單在這點上有點模糊我們web和桌面程式的感覺。在html5外web中也有基於xml的繪圖如：VML、SVG。而Canvas為基於像素的繪圖。 Canvas是一個相當於畫板的html節點，我們必須以js操作繪圖。
如下：
你的瀏覽器還不支援喔定義。
我們可以取得canvas物件為var c=document.getElementById("myCanvas");其應有js屬性方法如下列舉：
1：繪製渲染物件，c.getContext(" 2d"),取得2d繪圖對象，無論我們呼叫多少次所獲取的對像都會是相同的對象。
2：繪製方法：
clecrRect(left,top,width,height)清除制定矩形區域，
fillRect(left,top,width,height)繪製矩形，並以fillStyle填充。
fillText（text,x,y）繪製文字；
strokeRect(left,top,width,height) 繪製矩形，以strokeStyle繪製邊界。
beginPath():開啟路徑的繪製,重置path為初始狀態；
closePath():繪製路徑path結束，它會繪製一個閉合的區間，添加一條起始位置到當前坐標的閉合曲線;
moveTo（x，y）：設定繪圖其實座標。
lineTo(x，y);繪製從目前其實位置到x，y直線。
fill（），stroke（），clip（）：在完成繪製的最後的填充和邊界輪廓，剪輯區域。
arc（）：繪製弧,圓心位置、起始弧度、終止弧度來指定圓弧的位置和大小；
rect():矩形路徑;
drawImage（Imag img）：繪製圖片；
quadraticCurveTo():二次樣條曲線路徑,參數兩個控制點；
bezierCurveTo（）：貝塞爾曲線，參數三個控制點；
createImageData,getImageData，putImageData:Canvasvas中像素資料。 ImageData為記錄width、height、和資料 data，其中data為我們色素的記錄為
argb，所以陣列大小長度為width*height*4，順序分別為rgba。 getImageData為取得矩形區域像素，而putImageData則為設定矩形區域像素；
… and so on！
3：座標變換:
translate（x,y）：平移變換，原點移動到座標（x，y）；
rotate（a）：旋轉變換，旋轉 a度角；
scale（x，y）：伸縮變換；
save（），restore（）：提供和一個堆疊，保存和恢復繪圖狀態，save將當前繪圖狀態壓入堆棧，restore出棧，恢復繪圖狀態；
… and so on！
好了，也晚了。附我的測試程式碼，：

複製程式碼

程式碼如下:

程式碼如下:



程式碼如下：



你的瀏覽器還不支援喔

start(); } } }