<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 腳本 APIWebGL API 來繪製圖形和動畫。

屬性

此元素的屬性包括全域屬性

height

以 CSS 像素為單位的座標空間高度。默認值為 150。

moz-opaque Non-standard 已棄用

讓畫布知道是否透明度將成為一個因素。如果畫布知道沒有透明度,繪圖性能可以優化。這僅受到基於 Mozilla 的瀏覽器支持;請改用標準化的 canvas.getContext('2d', { alpha: false })

width

以 CSS 像素為單位的座標空間寬度。默認值為 300。

使用注意事項

替代內容

你應該在 <canvas> 區塊內提供替代內容。該內容將在舊版不支持 canvas 的瀏覽器以及禁用 JavaScript 的瀏覽器中呈現。

關閉 </canvas> 標籤

<img> 元素不同,<canvas> 元素需要使用關閉標籤(</canvas>)。

使用 CSS 與 HTML 調整畫布大小

畫布的顯示大小可以使用 CSS 更改,但如果這樣做,圖像在渲染期間將被縮放以適應樣式大小,這可能會使最終圖形渲染變形。

最好直接在 HTML 中或使用 JavaScript 通過在 <canvas> 元素上直接設置 widthheight 屬性來指定畫布尺寸。

最大畫布尺寸

<canvas> 元素的確切最大尺寸取決於瀏覽器和環境。雖然在大多數情況下,最大尺寸超過 10,000 x 10,000 像素,但特別是 iOS 設備將畫布尺寸限制為僅 4,096 x 4,096 像素。請參見不同瀏覽器和設備中的畫布大小限制

備註: 超出最大尺寸或面積會使畫布無法使用——繪製命令將無法運作。

使用離屏畫布

可以使用 OffscreenCanvas API 渲染畫布,其中文檔和畫布是解耦的。 好處是工作線程 可以處理畫布渲染,你的 Web 應用程序的主線程不會被畫布操作阻塞。 通過並行化工作,即使在離屏畫布上運行復雜的圖形,你 Web 應用程序的其他 UI 元素也將保持響應。 有關更多信息,請參見 OffscreenCanvas API 文檔。

範例

HTML

此代碼片段將一個畫布元素添加到你的 HTML 文檔中。如果瀏覽器無法讀取或渲染畫布,則提供了一個替代文本。

html
<canvas width="120" height="120">
  An alternative text describing what your canvas displays.
</canvas>

JavaScript

然後在 JavaScript 代碼中,調用 HTMLCanvasElement.getContext() 來獲取繪圖上下文並開始繪製到畫布上:

js
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 一樣暴露給無障礙工具。通常情況下,應該避免在可訪問的網站或應用程序中使用畫布。以下指南可以幫助使其更加訪問。

技術摘要

內容類型 流內容段落型內容嵌入型內容捫及內容
允許的內容 透明,但不包含互動型內容的後代,除了 <a> 元素、<button> 元素和 type 屬性為 checkboxradiobutton<input> 元素。
標籤省略 不允許,開始和結束標籤都是必須的。
允許的父元素 任何接受段落型內容的元素。
隱含的 ARIA 角色 沒有相對應的角色
允許的 ARIA 角色 任何
DOM 介面 HTMLCanvasElement

規範

Specification
HTML
# the-canvas-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
canvas
height
moz-opaque
DeprecatedNon-standard
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

參見