HTML DOM Canvas 對象

Canvas 對象是 HTML5 中新增的。

HTML5 <canvas> 標簽用于繪制圖像（通過腳本，通常是 JavaScript）。

訪問 Canvas 對象

您可以使用 getElementById() 來訪問 <canvas> 元素：

創(chuàng)建 Canvas 對象

您可以使用 document.createElement() 方法來創(chuàng)建 <canvas> 元素：

注意：<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。

getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。

本手冊提供完整的 getContext("2d") 對象的屬性和方法，可用于在畫布上繪制文本、線條、矩形、圓形等等。

---

顏色、樣式和陰影

屬性	描述
fillStyle	設置或返回用于填充繪畫的顏色、漸變或模式。
strokeStyle	設置或返回用于筆觸的顏色、漸變或模式。
shadowColor	設置或返回用于陰影的顏色。
shadowBlur	設置或返回用于陰影的模糊級別。
shadowOffsetX	設置或返回陰影與形狀的水平距離。
shadowOffsetY	設置或返回陰影與形狀的垂直距離。

方法	描述
createLinearGradient()	創(chuàng)建線性漸變（用在畫布內容上）。
createPattern()	在指定的方向上重復指定的元素。
createRadialGradient()	創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內容上）。
addColorStop()	規(guī)定漸變對象中的顏色和停止位置。

線條樣式

屬性	描述
lineCap	設置或返回線條的結束端點樣式。
lineJoin	設置或返回兩條線相交時，所創(chuàng)建的拐角類型。
lineWidth	設置或返回當前的線條寬度。
miterLimit	設置或返回最大斜接長度。

矩形

方法	描述
rect()	創(chuàng)建矩形。
fillRect()	繪制"被填充"的矩形。
strokeRect()	繪制矩形（無填充）。
clearRect()	在給定的矩形內清除指定的像素。

路徑

方法	描述
fill()	填充當前繪圖（路徑）。
stroke()	繪制已定義的路徑。
beginPath()	起始一條路徑，或重置當前路徑。
moveTo()	把路徑移動到畫布中的指定點，不創(chuàng)建線條。
closePath()	創(chuàng)建從當前點回到起始點的路徑。
lineTo()	添加一個新點，然后在畫布中創(chuàng)建從該點到最后指定點的線條。
clip()	從原始畫布剪切任意形狀和尺寸的區(qū)域。
quadraticCurveTo()	創(chuàng)建二次貝塞爾曲線。
bezierCurveTo()	創(chuàng)建三次貝塞爾曲線。
arc()	創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）。
arcTo()	創(chuàng)建兩切線之間的弧/曲線。
isPointInPath()	如果指定的點位于當前路徑中，則返回 true，否則返回 false。

轉換

方法	描述
scale()	縮放當前繪圖至更大或更小。
rotate()	旋轉當前繪圖。
translate()	重新映射畫布上的 (0,0) 位置。
transform()	替換繪圖的當前轉換矩陣。
setTransform()	將當前轉換重置為單位矩陣。然后運行 transform()。

文本

屬性	描述
font	設置或返回文本內容的當前字體屬性。
textAlign	設置或返回文本內容的當前對齊方式。
textBaseline	設置或返回在繪制文本時使用的當前文本基線。

方法	描述
fillText()	在畫布上繪制"被填充的"文本。
strokeText()	在畫布上繪制文本（無填充）。
measureText()	返回包含指定文本寬度的對象。

圖像繪制

方法	描述
drawImage()	向畫布上繪制圖像、畫布或視頻。

像素操作

屬性	描述
width	返回 ImageData 對象的寬度。
height	返回 ImageData 對象的高度。
data	返回一個對象，其包含指定的 ImageData 對象的圖像數(shù)據。

方法	描述
createImageData()	創(chuàng)建新的、空白的 ImageData 對象。
getImageData()	返回 ImageData 對象，該對象為畫布上指定的矩形復制像素數(shù)據。
putImageData()	把圖像數(shù)據（從指定的 ImageData 對象）放回畫布上。

合成

屬性	描述
globalAlpha	設置或返回繪圖的當前 alpha 或透明值。
globalCompositeOperation	設置或返回新圖像如何繪制到已有的圖像上。

其他

方法	描述
save()	保存當前環(huán)境的狀態(tài)。
restore()	返回之前保存過的路徑狀態(tài)和屬性。
createEvent()
getContext()
toDataURL()

標準屬性和事件

Canvas 對象同樣支持標準 屬性 和 事件。

---

相關文章

HTML 參考手冊：HTML <canvas> 標簽