屬性
此元素的屬性包括全域性屬性。
height-
座標空間的高度，以 CSS 畫素為單位。預設為 150。
moz-opaque非標準 已廢棄-
讓畫布知道是否會使用半透明。如果畫布知道沒有半透明，就可以最佳化繪製效能。此屬性僅受基於 Mozilla 的瀏覽器支援；請改用標準化的
canvas.getContext('2d', { alpha: false })。 width-
座標空間的寬度，以 CSS 畫素為單位。預設為 300。
用法說明
替代內容
你應該在 <canvas> 塊中提供替代內容。這些內容將在不支援 canvas 的舊瀏覽器和停用了 JavaScript 的瀏覽器中呈現。
閉合標籤 </canvas>
與 <img> 元素不同，<canvas> 元素需要閉合標籤 (</canvas>)。
使用 CSS 與 HTML 設定畫布尺寸
可以使用 CSS 更改畫布的顯示尺寸，但這樣做會在渲染時縮放影像以適應樣式設定的尺寸，這可能導致最終渲染的圖形失真。
最好直接在 <canvas> 元素上透過設定 width 和 height 屬性來指定畫布尺寸，可以直接在 HTML 中設定，也可以使用 JavaScript 設定。
畫布最大尺寸
<canvas> 元素的確切最大尺寸取決於瀏覽器和環境。雖然在大多數情況下，最大尺寸超過 10,000 x 10,000 畫素，但值得注意的是，iOS 裝置將畫布尺寸限制為僅 4,096 x 4,096 畫素。請參閱不同瀏覽器和裝置中的畫布尺寸限制。
備註：超出最大尺寸或面積會使畫布無法使用——繪製命令將不起作用。
使用離屏畫布
可以使用 OffscreenCanvas API 來渲染畫布，這種方式下文件和畫布是解耦的。其好處是工作者執行緒可以處理畫布渲染，而 Web 應用的主執行緒不會被畫布操作阻塞。透過並行化工作，即使在離屏畫布上運行復雜的圖形，Web 應用的其他 UI 元素也能保持響應。更多資訊，請參閱 OffscreenCanvas API 文件。
無障礙
替代內容
<canvas> 元素本身只是一個位圖，不提供任何有關繪製物件的資訊。Canvas 內容不會像語義化 HTML 那樣暴露給無障礙工具。通常，你應該避免在需要無障礙訪問的網站或應用中使用 canvas。以下指南可以幫助提高其無障礙性。
示例
HTML
此程式碼片段向 HTML 文件中新增一個 canvas 元素。如果瀏覽器無法讀取或渲染 canvas，則會提供一段後備文字。
<canvas width="120" height="120">
An alternative text describing what your canvas displays.
</canvas>
JavaScript
然後在 JavaScript 程式碼中，呼叫 HTMLCanvasElement.getContext() 來獲取繪圖上下文並開始在畫布上繪圖。
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
// Add a rectangle at (10, 10) with size 100x100 pixels
ctx.fillRect(10, 10, 100, 100);
結果
技術摘要
規範
| 規範 |
|---|
| HTML # the-canvas-element |
瀏覽器相容性
載入中…
另見
- Canvas API
- Canvas 教程
- OffscreenCanvas
- Canvas 速查表 (2009)
- Canvas 速查表 (pdf) (2015)
- Safari HTML canvas 指南 via Apple (2013)
CanvasRenderingContext2Dcanvas 元素的 2D 繪圖上下文 via Apple.com- WebGL API
<img>- SVG
- HTML 影片和音訊