當前位置:才華齋>設計>網頁設計>

html5的canvas方法使用

網頁設計 閱讀(1.19W)

HTML5 canvas的isPointInPath是一個非常重要的函式,其作用是判斷某一點是否是在某個路徑內.其語法如下:

html5的canvas方法使用

  html5的canvas方法使用指南,

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()