在html5中我覺得最重要的就是引入了Canvas，使得我們可以在web中繪制各種圖形。給人感覺單在這點(diǎn)上有點(diǎn)模糊我們web和桌面程序的感覺。在html5外web中也有基于xml的繪圖如：VML、SVG。而Canvas為基于像素的繪圖。Canvas是一個相當(dāng)于畫板的html節(jié)點(diǎn)，我們必須以js操作繪圖。

如下：

<canvas id="myCanvas" width="600" height="300">你的瀏覽器還不支持哦</canvas>定義。

我們可以獲取canvas對象為var c=document.getElementById("myCanvas");其應(yīng)有js屬性方法如下列舉：

1：繪制渲染對象，c.getContext("2d"),獲取2d繪圖對象，無論我們調(diào)用多少次獲取的對象都將是相同的對象。

2：繪制方法：                      

clecrRect(left,top,width,height)清除制定矩形區(qū)域，

fillRect(left,top,width,height)繪制矩形，并以fillStyle填充。

fillText（text,x,y）繪制文字；

strokeRect(left,top,width,height)繪制矩形，以strokeStyle繪制邊界。

beginPath():開啟路徑的繪制,重置path為初始狀態(tài)；

closePath():繪制路徑path結(jié)束，它會繪制一個閉合的區(qū)間，添加一條起始位置到當(dāng)前坐標(biāo)的閉合曲線；

moveTo（x，y）：設(shè)置繪圖其實(shí)坐標(biāo)。

lineTo(x，y);繪制從當(dāng)前其實(shí)位置到x，y直線。

fill（），stroke（），clip（）：在完成繪制的最后的填充和邊界輪廓，剪輯區(qū)域。

arc（）：繪制弧,圓心位置、起始弧度、終止弧度來指定圓弧的位置和大??；

rect():矩形路徑;

drawImage（Imag img）：繪制圖片；

quadraticCurveTo():二次樣條曲線路徑,參數(shù)兩個控制點(diǎn)；

bezierCurveTo（）：貝塞爾曲線，參數(shù)三個控制點(diǎn)；

createImageData,getImageData，putImageData:為Canvas中像素?cái)?shù)據(jù)。ImageData為記錄width、height、和數(shù)據(jù)data，其中data為我們色素的記錄為

argb，所以數(shù)組大小長度為width*height*4，順序分別為rgba。getImageData為獲取矩形區(qū)域像素，而putImageData則為設(shè)置矩形區(qū)域像素；

… and so on！

3：坐標(biāo)變換：

translate（x,y）：平移變換，原點(diǎn)移動到坐標(biāo)（x，y）；

rotate（a）：旋轉(zhuǎn)變換，旋轉(zhuǎn)a度角；

scale（x，y）：伸縮變換；

save（），restore（）：提供和一個堆棧，保存和恢復(fù)繪圖狀態(tài)，save將當(dāng)前繪圖狀態(tài)壓入堆棧，restore出棧，恢復(fù)繪圖狀態(tài)。

軟件定制，CRM開發(fā)，易勢科技給您最好的服務(wù)。