属性
此元素的属性包括全局属性。
height-
坐标空间的高度，以 CSS 像素为单位。默认为 150。
moz-opaque非标准 已废弃-
让画布知道是否会使用半透明。如果画布知道没有半透明，就可以优化绘制性能。此属性仅受基于 Mozilla 的浏览器支持；请改用标准化的
canvas.getContext('2d', { alpha: false })。 width-
坐标空间的宽度，以 CSS 像素为单位。默认为 300。
用法说明
替代内容
你应该在 <canvas> 块中提供替代内容。这些内容将在不支持 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> 元素本身只是一个位图，不提供任何有关绘制对象的信息。Canvas 内容不会像语义化 HTML 那样暴露给无障碍工具。通常，你应该避免在需要无障碍访问的网站或应用中使用 canvas。以下指南可以帮助提高其无障碍性。
示例
HTML
此代码片段向 HTML 文档中添加一个 canvas 元素。如果浏览器无法读取或渲染 canvas，则会提供一段后备文本。
<canvas width="120" height="120">
An alternative text describing what your canvas displays.
</canvas>
JavaScript
然后在 JavaScript 代码中，调用 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);
结果
技术摘要
规范
| 规范 |
|---|
| HTML # the-canvas-element |
浏览器兼容性
加载中…
另见
- Canvas API
- Canvas 教程
- OffscreenCanvas
- Canvas 速查表 (2009)
- Canvas 速查表 (pdf) (2015)
- Safari HTML canvas 指南 via Apple (2013)
CanvasRenderingContext2Dcanvas 元素的 2D 绘图上下文 via Apple.com- WebGL API
<img>- SVG
- HTML 视频和音频