<canvas>:图形画布元素
使用 HTML <canvas>
元素与 画布脚本 API 或 WebGL API 来绘制图形和动画。
¥Use the HTML <canvas>
element with either the canvas scripting API or the WebGL API to draw graphics and animations.
属性
¥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。
使用说明
可替代的内容
关闭 </canvas>
标签
使用 CSS 与 HTML 调整画布大小
¥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.
无障碍
可替代的内容
¥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.
示例
HTML
此代码片段将画布元素添加到你的 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
然后在 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);
结果
技术总结
规范
Specification |
---|
HTML Standard # the-canvas-element |
浏览器兼容性
BCD tables only load in the browser
也可以看看
¥See also
- 画布 API
- 画布教程
- OffscreenCanvas
- 画布备忘单(2009)
- 画布备忘单(pdf)(2015)
- Apple 的 Safari HTML 画布指南 (2013)
CanvasRenderingContext2D
画布元素的 2D 绘图上下文 来自 Apple.com- WebGL API
<img>
- SVG
- 使用 HTML 音频和视频