<canvas>:繪圖畫布元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
使用 HTML <canvas>
元素與 canvas 腳本 API 或 WebGL API 來繪製圖形和動畫。
屬性
此元素的屬性包括全域屬性。
height
-
以 CSS 像素為單位的座標空間高度。默認值為 150。
moz-opaque
非標準 已棄用-
讓畫布知道是否透明度將成為一個因素。如果畫布知道沒有透明度,繪圖性能可以優化。這僅受到基於 Mozilla 的瀏覽器支持;請改用標準化的
canvas.getContext('2d', { alpha: false })
。 width
-
以 CSS 像素為單位的座標空間寬度。默認值為 300。
使用注意事項
替代內容
你應該在 <canvas>
區塊內提供替代內容。該內容將在舊版不支持 canvas 的瀏覽器以及禁用 JavaScript 的瀏覽器中呈現。
關閉 </canvas>
標籤
使用 CSS 與 HTML 調整畫布大小
畫布的顯示大小可以使用 CSS 更改,但如果這樣做,圖像在渲染期間將被縮放以適應樣式大小,這可能會使最終圖形渲染變形。
最好直接在 HTML 中或使用 JavaScript 通過在 <canvas>
元素上直接設置 width
和 height
屬性來指定畫布尺寸。
最大畫布尺寸
<canvas>
元素的確切最大尺寸取決於瀏覽器和環境。雖然在大多數情況下,最大尺寸超過 10,000 x 10,000 像素,但特別是 iOS 設備將畫布尺寸限制為僅 4,096 x 4,096 像素。請參見不同瀏覽器和設備中的畫布大小限制。
備註:超出最大尺寸或面積會使畫布無法使用——繪製命令將無法運作。
使用離屏畫布
可以使用 OffscreenCanvas
API 渲染畫布,其中文檔和畫布是解耦的。
好處是工作線程 可以處理畫布渲染,你的 Web 應用程序的主線程不會被畫布操作阻塞。
通過並行化工作,即使在離屏畫布上運行復雜的圖形,你 Web 應用程序的其他 UI 元素也將保持響應。
有關更多信息,請參見 OffscreenCanvas
API 文檔。
範例
HTML
此代碼片段將一個畫布元素添加到你的 HTML 文檔中。如果瀏覽器無法讀取或渲染畫布,則提供了一個替代文本。
<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);
結果
無障礙議題
替代內容
<canvas>
元素本身只是一個位圖,並不提供有關任何繪製對象的信息。畫布內容不會向語義化 HTML 一樣暴露給無障礙工具。通常情況下,應該避免在可訪問的網站或應用程序中使用畫布。以下指南可以幫助使其更加訪問。
技術摘要
規範
Specification |
---|
HTML Standard # the-canvas-element |
瀏覽器相容性
BCD tables only load in the browser
參見
- Canvas API
- Canvas 教程
- OffscreenCanvas
- Canvas 速查表 (2009)
- Canvas 速查表(pdf)(2015)
- Safari HTML 畫布指南 透過 Apple(2013)
CanvasRenderingContext2D
畫布元素的 2D 繪圖上下文 透過 Apple.com- WebGL API
<img>
- SVG
- 使用 HTML 音頻和影片