HTML DOM Canvas 對(duì)象

Canvas 對(duì)象是 HTML5 中新增的。

HTML5 <canvas> 標(biāo)簽用于繪制圖像（通過(guò)腳本，通常是 JavaScript）。

訪(fǎng)問(wèn) Canvas 對(duì)象

您可以使用 getElementById() 來(lái)訪(fǎng)問(wèn) <canvas> 元素：

創(chuàng)建 Canvas 對(duì)象

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

注意：<canvas> 元素本身并沒(méi)有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來(lái)完成實(shí)際的繪圖任務(wù)。

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

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

---

顏色、樣式和陰影

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

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

線(xiàn)條樣式

屬性	描述
lineCap	設(shè)置或返回線(xiàn)條的結(jié)束端點(diǎn)樣式。
lineJoin	設(shè)置或返回兩條線(xiàn)相交時(shí)，所創(chuàng)建的拐角類(lèi)型。
lineWidth	設(shè)置或返回當(dāng)前的線(xiàn)條寬度。
miterLimit	設(shè)置或返回最大斜接長(zhǎng)度。

矩形

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

路徑

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

轉(zhuǎn)換

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

文本

屬性	描述
font	設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性。
textAlign	設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式。
textBaseline	設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線(xiàn)。

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

圖像繪制

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

像素操作

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

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

合成

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

其他

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

標(biāo)準(zhǔn)屬性和事件

Canvas 對(duì)象同樣支持標(biāo)準(zhǔn) 屬性 和 事件。

---

相關(guān)文章

HTML 參考手冊(cè)：HTML <canvas> 標(biāo)簽