首頁  >  文章  >  web前端  >  html5-Canvas可以在web中繪製各種圖形_html5教學技巧

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

WBOY
WBOY原創
2016-05-16 15:50:451286瀏覽

在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(); } } }
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn