<canvas>: 圖形畫布元素

基線 廣泛可用

此功能已得到良好建立，並且可在許多裝置和瀏覽器版本上執行。它已在瀏覽器中可用，自 2015 年 7 月.

使用**HTML <canvas> 元素**以及 畫布指令碼 API 或 WebGL API 繪製圖形和動畫。

屬性

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

height

座標空間的高度（以 CSS 畫素為單位）。預設為 150。

moz-opaque

讓畫布知道半透明是否會成為一個因素。如果畫布知道沒有半透明，則可以最佳化繪製效能。這僅受基於 Mozilla 的瀏覽器支援；請改用標準化的 canvas.getContext('2d', { alpha: false })。

width

座標空間的寬度（以 CSS 畫素為單位）。預設為 300。

使用說明

備用內容

您應該在 <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> 元素本身只是一個位圖，不提供有關任何繪製物件的任何資訊。畫布內容不會公開給輔助功能工具，因為語義 HTML 是。通常，您應該避免在可訪問的網站或應用程式中使用畫布。以下指南可以幫助使其更易於訪問。

示例

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);

結果

技術摘要

內容類別 流內容、短語內容、嵌入內容、可感知內容。
允許的內容

 透明的，但除了以下元素之外，沒有互動式內容的後代：互動式內容 <a> 元素、<button> 元素、<input> 元素（其 type 屬性為 checkbox、radio 或 button）。
標籤省略 無，起始標籤和結束標籤都是必須的。
允許的父元素 任何接受短語內容的元素。
隱式 ARIA 角色 沒有對應的角色
允許的 ARIA 角色 任何
DOM 介面 HTMLCanvasElement

規範

規範
HTML 標準
# the-canvas-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱