Skip to content

Latest commit

 

History

History
173 lines (134 loc) · 6.75 KB

index.md

File metadata and controls

173 lines (134 loc) · 6.75 KB
Raw
title slug
<canvas>：繪圖畫布元素
Web/HTML/Element/canvas

{{HTMLSidebar}}

使用 HTML <canvas> 元素與 canvas 腳本 API 或 WebGL API 來繪製圖形和動畫。

屬性

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

  • height
    • : 以 CSS 像素為單位的座標空間高度。默認值為 150。
  • moz-opaque {{non-standard_inline}} {{deprecated_inline}}
    • : 讓畫布知道是否透明度將成為一個因素。如果畫布知道沒有透明度，繪圖性能可以優化。這僅受到基於 Mozilla 的瀏覽器支持；請改用標準化的 {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}}。
  • width
    • : 以 CSS 像素為單位的座標空間寬度。默認值為 300。

使用注意事項

替代內容

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

關閉 </canvas> 標籤

與 {{HTMLElement("img")}} 元素不同，{{HTMLElement("canvas")}} 元素需要使用關閉標籤（</canvas>）。

使用 CSS 與 HTML 調整畫布大小

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

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

最大畫布尺寸

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

Note

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

使用離屏畫布

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

範例

HTML

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

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

JavaScript

然後在 JavaScript 代碼中，調用 {{domxref("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);

結果

{{EmbedLiveSample('範例', 600, 150)}}

無障礙議題

替代內容

<canvas> 元素本身只是一個位圖，並不提供有關任何繪製對象的信息。畫布內容不會向語義化 HTML 一樣暴露給無障礙工具。通常情況下，應該避免在可訪問的網站或應用程序中使用畫布。以下指南可以幫助使其更加訪問。

技術摘要

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

規範

{{Specifications}}

瀏覽器相容性

{{Compat}}

參見