html5的canvas方法使用指南_html5教學技巧

canvas的方法

     save()保存目前環境的狀態

     restore() 傳回先前已儲存的路徑狀態與屬性

     createEvent()

     getContext()傳回一個物件,指出存取繪圖功能必要的API

     toDataUPL() 回傳canvas影像的URL

線條樣式的屬性與方法

     屬性:

     lineCap設定或回復線條的結束端點樣式

     lineJoin設定或返回兩條線相交時,所建立的角落類型

     lineWidth設定或返回目前線條的寬度.

     miterLimit設定或回傳最大斜接長度

顏色,樣式和陰影屬性和方法

     屬性

     fillStyle設定或回傳用於填滿畫作的顏色,漸層或模式

     strokeStyle設定或傳回用於筆觸的顏色,漸層或模式

     shadowColor設定或傳回用於陰影的顏色

     shadowBlur設定或返回用於陰影的模糊等級

     shadowOffsetX設定或返回陰影距形狀的水平距離

     shadowOffsetY設定或返回陰影距形狀的垂直距離

方法

     createLinearGradient()建立線性漸層(用在畫布內容上)

     createPattern()在指定的方向重複指定的元素

     createRadialGradient()創造放射狀/環形的漸變(用在畫布內容上)

     addColorStop()規定漸層物件中的顏色或停止位置

路徑方法

         fill()填入目前繪圖(路徑)

         stroke()繪製定義的路徑

beginPath()起始一條路徑,或重置目前路徑

moveTo()把路徑移到畫布中的指定點,不建立線條

closePath()建立從目前點回到起始點的路徑

lineTo()新增一個點,建立從該點到最後指定點的線條

clip()從原始畫布剪切任意形狀和尺寸的區域

quadraticCurveTo()建立第二次貝茲曲線

bezierCureTo()建立上次方貝塞爾曲線

arc()建立弧/曲線(用於建立圓形或部分圓)

arcTo()建立兩切線之間的弧/曲線

isPointInPath()如果指定的點位於目前路徑中,傳回布林值

長方形

         Rect()建立長方形

         fillRect()繪製」填入」的長方形

strokeRect()繪製矩形(無填充)

clearRect()在給定的矩形內清除指定的像素

設定文字屬性與方法

         屬性:

         font 設定或傳回文字內容的目前字體屬性

         textAlign設定或返回文字內容的目前對齊方式

textBaseline 設定會傳回在繪製文字時使用的目前文字基線.

         方法:

fillText()在畫布上繪製」被填滿的」文字

strokeText()在畫布上繪製文字(無填充)

measureText()傳回包含指定文字寬度的物件

轉換方法

         scale() 縮放目前繪圖至較大或較小

         rotate() 旋轉目前繪圖

         translate()重新映射花布衫的(0,0)位置

         transform()取代繪圖的目前轉換矩陣

setTransform()將目前轉換重設為單位矩陣.然後執行transform()