<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 表格仅在浏览器中加载

另请参阅