HTML5 <canvas> 標(biāo)簽用于繪制圖像（通過腳本，通常是 JavaScript）。
您可以使用 getElementById() 來訪問 <canvas> 元素：
您可以使用 document.createElement() 方法來創(chuàng)建 <canvas> 元素：
注意：<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實(shí)際的繪圖任務(wù)。
getContext() 方法可返回一個(gè)對象，該對象提供了用于在畫布上繪圖的方法和屬性。
本手冊提供完整的 getContext("2d") 對象的屬性和方法，可用于在畫布上繪制文本、線條、矩形、圓形等等。
| 屬性 | 描述 |
|---|---|
| fillStyle | 設(shè)置或返回用于填充繪畫的顏色、漸變或模式。 |
| strokeStyle | 設(shè)置或返回用于筆觸的顏色、漸變或模式。 |
| shadowColor | 設(shè)置或返回用于陰影的顏色。 |
| shadowBlur | 設(shè)置或返回用于陰影的模糊級別。 |
| shadowOffsetX | 設(shè)置或返回陰影與形狀的水平距離。 |
| shadowOffsetY | 設(shè)置或返回陰影與形狀的垂直距離。 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 創(chuàng)建線性漸變（用在畫布內(nèi)容上）。 |
| createPattern() | 在指定的方向上重復(fù)指定的元素。 |
| createRadialGradient() | 創(chuàng)建放射狀/環(huán)形的漸變（用在畫布內(nèi)容上）。 |
| addColorStop() | 規(guī)定漸變對象中的顏色和停止位置。 |
| 屬性 | 描述 |
|---|---|
| lineCap | 設(shè)置或返回線條的結(jié)束端點(diǎn)樣式。 |
| lineJoin | 設(shè)置或返回兩條線相交時(shí)，所創(chuàng)建的拐角類型。 |
| lineWidth | 設(shè)置或返回當(dāng)前的線條寬度。 |
| miterLimit | 設(shè)置或返回最大斜接長度。 |
| 方法 | 描述 |
|---|---|
| rect() | 創(chuàng)建矩形。 |
| fillRect() | 繪制"被填充"的矩形。 |
| strokeRect() | 繪制矩形（無填充）。 |
| clearRect() | 在給定的矩形內(nèi)清除指定的像素。 |
| 方法 | 描述 |
|---|---|
| fill() | 填充當(dāng)前繪圖（路徑）。 |
| stroke() | 繪制已定義的路徑。 |
| beginPath() | 起始一條路徑，或重置當(dāng)前路徑。 |
| moveTo() | 把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條。 |
| closePath() | 創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑。 |
| lineTo() | 添加一個(gè)新點(diǎn)，然后在畫布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條。 |
| clip() | 從原始畫布剪切任意形狀和尺寸的區(qū)域。 |
| quadraticCurveTo() | 創(chuàng)建二次貝塞爾曲線。 |
| bezierCurveTo() | 創(chuàng)建三次貝塞爾曲線。 |
| arc() | 創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）。 |
| arcTo() | 創(chuàng)建兩切線之間的弧/曲線。 |
| isPointInPath() | 如果指定的點(diǎn)位于當(dāng)前路徑中，則返回 true，否則返回 false。 |
| 方法 | 描述 |
|---|---|
| scale() | 縮放當(dāng)前繪圖至更大或更小。 |
| rotate() | 旋轉(zhuǎn)當(dāng)前繪圖。 |
| translate() | 重新映射畫布上的 (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)前對齊方式。 |
| textBaseline | 設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線。 |
| 方法 | 描述 |
|---|---|
| fillText() | 在畫布上繪制"被填充的"文本。 |
| strokeText() | 在畫布上繪制文本（無填充）。 |
| measureText() | 返回包含指定文本寬度的對象。 |
| 方法 | 描述 |
|---|---|
| drawImage() | 向畫布上繪制圖像、畫布或視頻。 |
| 屬性 | 描述 |
|---|---|
| width | 返回 ImageData 對象的寬度。 |
| height | 返回 ImageData 對象的高度。 |
| data | 返回一個(gè)對象，其包含指定的 ImageData 對象的圖像數(shù)據(jù)。 |
| 方法 | 描述 |
|---|---|
| createImageData() | 創(chuàng)建新的、空白的 ImageData 對象。 |
| getImageData() | 返回 ImageData 對象，該對象為畫布上指定的矩形復(fù)制像素?cái)?shù)據(jù)。 |
| putImageData() | 把圖像數(shù)據(jù)（從指定的 ImageData 對象）放回畫布上。 |
| 屬性 | 描述 |
|---|---|
| globalAlpha | 設(shè)置或返回繪圖的當(dāng)前 alpha 或透明值。 |
| globalCompositeOperation | 設(shè)置或返回新圖像如何繪制到已有的圖像上。 |
| 方法 | 描述 |
|---|---|
| save() | 保存當(dāng)前環(huán)境的狀態(tài)。 |
| restore() | 返回之前保存過的路徑狀態(tài)和屬性。 |
| createEvent() | |
| getContext() | |
| toDataURL() |
Canvas 對象同樣支持標(biāo)準(zhǔn) 屬性 和 事件。
HTML 參考手冊：HTML <canvas> 標(biāo)簽
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請聯(lián)系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權(quán)所有
