We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

<canvas>元素可被用来通过脚本(通常是JavaScript)绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容,这些内容将会在在旧的、不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。

更多关于<canvas>元素内容,参见canvas元素讨论页面.

属性

本元素支持 全局属性.

height
该元素占用空间的高度,以 CSS 像素(px)表示,默认为 150。
moz-opaque
通过设置这个属性,来控制canvas元素是否半透明。如果你不想canvas元素被设置为半透明,使用这个元素将可以优化浏览器绘图性能。
width
该元素占用空间的宽度,以 CSS 像素(px)表示,默认为 300。

注意事项

需要</canvas> 标签

不同于 <img> 元素,  <canvas>元素需要有闭合标签 (</canvas>).

设置画布(canvas)的大小

可以通过CSS来控制<canvas>的大小。在渲染的过程中<canvas>元素中的内容会根据情况缩放来适应需要的大小。如果您发现<canvas>元素中展示的内容变形,您可以通过<canvas>自带的height和width属性进行相关设置,而不要使用CSS。

示例

<canvas id="canvas" width="300" height="300">
  Sorry, your browser doesn't support the &lt;canvas&gt; 

element.
</canvas>

如果你没有设置<canvas>元素的透明度,可以考虑使用moz-opaque属性。下面给出的示例代码可用于页面渲染优化。但需要您注意的是,这个属性目前还没有被推广开来,只能在基于Mozilla内核的浏览器内生效。

<canvas id="mycanvas" moz-opaque></canvas>

规范

Specification Status Comment
HTML Living Standard
<canvas>
Living Standard  
HTML5
<canvas>
Recommendation 初始定义


浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.5 (1.8)[1]
6.0 (6.0)[2]
12.0 (12.0)[3]
9.0 9.0[4] 2.0[5]
moz-opaque 未实现 3.5 (1.9.1) 未实现 未实现 未实现
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support 1.5 (1.8)[1]
6.0 (6.0)[2]
12.0 (12.0)[3]
? ? ? 1.0
moz-opaque 1.0 (1.9.1) 未实现 未实现 未实现 未实现

[1] Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)内核之前的浏览器,<canvas>元素的宽和高必须被设置为正整数。

[2] Prior to Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3),内核之前的浏览器,即使<canvas> 元素没有宽或高都将被渲染。

[3] Before Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9)内核之前的浏览器,如果javaScript被禁用的话,<canvas>元素依旧会被浏览器渲染,而不是按照标准显示元素标签之间需要显示的内容。而现在正好相反。

[4] 更多请参阅 changelog for Opera 9.0.

[5] 早期版本的Safari浏览器不强制要求<canvas>元素被闭合,但是根据相关规范的要求,仍然强烈建议在编写您自己的HTML文档的时候,确保闭合掉了<canvas>元素。

参阅

文档标签和贡献者

标签: 
此页面的贡献者: Martin.Chow, pantao, King.521, lunix01, qguor, ziyunfei, xcffl
最后编辑者: Martin.Chow,