HTML5 canvas畫布詳解（二）

上一篇對canvas標籤作了簡單的介紹和用法範例，但實際上canvas的用法是非常強大的，很多酷炫的HTML5動畫及遊戲都是基於canvs來製作的。因此決定繼續來兩篇與canvas相關的博文，鞏固canvas的基礎。
本篇主要介紹canvas的相關屬性和用法。

顏色、樣式和陰影

設定或傳回用於填滿繪畫的顏色、漸層或模式設定或傳回用於筆觸的色彩、漸層或模式設定或傳回用於陰影的顏色設定或傳回用於陰影的模糊等級設定或傳回陰影距離形狀的水平距離

屬性	#描述
	##fillStyle
	#strokeStyle
	shadowColor
	shadowBlur
	shadowOffsetX

shadowOffsetY##描述createLinearGradient()建立線性漸層（用在畫布內容上）createPattern()在指定的方向上重複指定的元素createRadialGradient()建立放射狀/環形的漸變（用在畫布內容上）

設定或傳回陰影距離形狀的垂直距離
#方法

addColorStop()規定漸層物件中的顏色與停止位置##線條樣式設定或傳回線條的結束端點樣式設定或傳回兩條線相交時，所建立的轉角類型設定或傳回目前的線條寬度

屬性	描述
	#lineCap
	lineJoin
	lineWidth

miterLimit#設定或傳回最大斜接長度方法#描述rect()建立矩形fillRect()繪製「被填滿」的矩形strokeRect()#繪製矩形（無填充）

	##矩形

clearRect()

#在給定的矩形內清除指定的像素方法描述fill()填入目前繪圖（路徑）stroke()繪製已定義的路徑##bezierCurveTo()建立三次方貝塞爾曲線arc()#建立弧/曲線（用於建立圓形或部分圓）arcTo()建立兩切線之間的弧/曲線isPointInPath()

	路徑
##beginPath ()	起始一條路徑，或重設目前路徑
moveTo()	把路徑移到畫布中的指定點，不建立線條
closePath()	建立從目前點回到起始點的路徑
lineTo()	新增一個新點，然後在畫布中建立從該點到最後指定點的線條
#clip()	從原始畫布剪下任意形狀和尺寸的區域
quadraticCurveTo()	#建立二次貝塞爾曲線

如果指定的點位於目前路徑中，則傳回true，否則回傳false

轉換

################################################### #描述##################scale()######縮放目前繪圖至更大或更小############ rotate()######旋轉目前繪圖############translate()######重新對應畫布上的(0,0) 位置####### ######transform()######取代繪圖的目前轉換矩陣#############setTransform()######將目前轉換重設為單位矩陣。然後執行transform()###############文字################屬性#####描述############## ############font######設定或傳回文字內容的目前字體屬性############textAlign######設定或傳回文字內容的目前對齊方式############textBaseline######設定或傳回在繪製文字時使用的目前文字基準############

方法	描述
#fillText()	在畫布上繪製「被填滿的」文字
strokeText()	在畫布上繪製文字（無填滿）
measureText ()	傳回包含指定文字寬度的物件

圖片繪製

方法	描述
drawImage()	向畫布上繪製圖像、畫布或影片

#像素操作

#屬性	描述
width	傳回ImageData 物件的寬度
height	傳回ImageData 物件的高度
data	傳回一個對象，其包含指定的ImageData 物件的圖像資料

## 描述createImageData()#建立新的、空白的ImageData 物件getImageData()傳回ImageData 對象，該物件為畫布上指定的矩形複製像素資料putImageData()將影像資料（從指定的ImageData 對象）放回畫布上

方法

圖像組合

屬性globalAlphaglobalCompositeOperation其他方法

##描述
設定或傳回繪圖的目前alpha 或透明值
設定或返回新圖像如何繪製到已有的圖像上

方法save()restore()createEvent() getContext()#toDataURL()下一節將用實例說明各屬性和方法的特定用法。

#描述
儲存目前環境的狀態
傳回先前已儲存過的路徑狀態與屬性
取得用於在畫布上繪圖的物件
匯出在canvas元素上繪製的圖像

以上是HTML5 canvas畫布詳解（二）的詳細內容。更多資訊請關注PHP中文網其他相關文章！