<canvas>

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

规范

浏览器兼容性

[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>元素。

参阅

• MDN canvas portal
• Canvas tutorial
• Canvas cheat sheet
• Canvas-related demos
• Canvas introduction by Apple