<canvas>:图形画布元素

¥Attributes

该元素的属性包括 全局属性。

¥This element's attributes include the global attributes.

height

坐标空间的高度（以 CSS 像素为单位）。默认为 150。

moz-opaque Non-standard Deprecated

让画布知道半透明是否会成为一个因素。如果画布知道没有半透明，则可以优化绘画性能。仅基于 Mozilla 的浏览器支持此功能；使用标准化 canvas.getContext('2d', { alpha: false }) 代替。

width

CSS 像素中坐标空间的宽度。默认为 300。

¥Usage notes

¥Alternative content

你应该在 <canvas> 块内提供替代内容。该内容将在不支持画布的旧浏览器和禁用 JavaScript 的浏览器中呈现。

¥You should provide alternate content inside the <canvas> block. That content will be rendered both on older browsers that don't support canvas and in browsers with JavaScript disabled.

¥Closing </canvas> tag

与 <img> 元素不同，<canvas> 元素需要结束标记 (</canvas>)。

¥Unlike the <img> element, the <canvas> element requires the closing tag (</canvas>).

¥Sizing the canvas using CSS versus HTML

可以使用 CSS 更改画布的显示大小，但如果这样做，图片会在渲染过程中缩放以适合样式大小，这可能会使最终的图形渲染最终失真。

¥The displayed size of the canvas can be changed using CSS, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted.

最好通过直接在 <canvas> 元素上设置 width 和 height 属性（直接在 HTML 中或使用 JavaScript）来指定画布尺寸。

¥It is better to specify your canvas dimensions by setting the width and height attributes directly on the <canvas> elements, either directly in the HTML or by using JavaScript.

¥Maximum canvas size

<canvas> 元素的确切最大大小取决于浏览器和环境。虽然在大多数情况下最大尺寸超过 10,000 x 10,000 像素，但值得注意的是 iOS 设备将画布大小限制为仅 4,096 x 4,096 像素。参见 不同浏览器和设备中的画布大小限制。

¥The exact maximum size of a <canvas> element depends on the browser and environment. While in most cases the maximum dimensions exceed 10,000 x 10,000 pixels, notably iOS devices limit the canvas size to only 4,096 x 4,096 pixels. See canvas size limits in different browsers and devices.

注意：超过最大尺寸或面积会使画布无法使用 - 绘图命令将不起作用。

¥Note: Exceeding the maximum dimensions or area renders the canvas unusable — drawing commands will not work.

¥Using an offscreen canvas

可以使用 OffscreenCanvas API 来渲染画布，其中文档和画布是解耦的。好处是 工作线程 可以处理画布渲染，并且 Web 应用的主线程不会被画布操作阻塞。通过并行化工作，即使你在屏幕外画布上运行复杂的图形，Web 应用的其他 UI 元素也将保持响应。有关更多信息，请参阅 OffscreenCanvas API 文档。

¥A canvas can be rendered using the OffscreenCanvas API where the document and canvas are decoupled. The benefit is that a worker thread can handle canvas rendering and the main thread of your web application is not blocked by canvas operations. By parallelizing work, other UI elements of your web application will remain responsive even if you are running complex graphics on an offscreen canvas. For more information, see the OffscreenCanvas API documentation.

¥Accessibility

¥Alternative content

<canvas> 元素本身只是一个位图，不提供有关任何绘制对象的信息。Canvas 内容不会像语义 HTML 那样暴露给辅助工具。一般来说，你应该避免在可访问的网站或应用中使用画布。以下指南可以帮助你更轻松地访问它。

¥The <canvas> element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools as semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guides can help to make it more accessible.

• 画布辅助功能用例
• Canvas 元素可访问性问题
• Firefox 13 中的 HTML Canvas 可访问性 – 作者：Steve Faulkner
• 交互式画布元素的最佳实践

¥Examples

此代码片段将画布元素添加到你的 HTML 文档中。如果浏览器无法读取或渲染画布，则会提供后备文本。

¥This code snippet adds a canvas element to your HTML document. A fallback text is provided if a browser is unable to read or render the canvas.

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

然后在 JavaScript 代码中，调用 HTMLCanvasElement.getContext() 获取绘图上下文并开始在画布上绘图：

¥Then in the JavaScript code, call HTMLCanvasElement.getContext() to get a drawing context and start drawing onto the canvas:

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

¥Result

¥Technical summary

¥See also

• 画布 API
• 画布教程
• OffscreenCanvas
• 画布备忘单(2009)
• 画布备忘单（pdf）（2015）
• Apple 的 Safari HTML 画布指南 (2013)
• CanvasRenderingContext2D 画布元素的 2D 绘图上下文 来自 Apple.com
• WebGL API
• <img>
• SVG
• 使用 HTML 音频和视频