<canvas>元素可被用来通过脚本(通常是JavaScript)绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容,这些内容将会在在旧的、不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。
更多关于<canvas>元素内容,参见canvas元素讨论页面.
属性
本元素支持 全局属性.
- {{htmlattrdef("height")}}
- 该元素占用空间的高度,以 CSS 像素(px)表示,默认为 150。
- {{htmlattrdef("moz-opaque")}} {{non-standard_inline}}
- 通过设置这个属性,来控制canvas元素是否半透明。如果你不想canvas元素被设置为半透明,使用这个元素将可以优化浏览器绘图性能。
- {{htmlattrdef("width")}}
- 该元素占用空间的宽度,以 CSS 像素(px)表示,默认为 300。
注意事项
需要</canvas>
标签
不同于 {{HTMLElement("img")}} 元素, {{HTMLElement ("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 <canvas> element. </canvas>
如果你没有设置<canvas>元素的透明度,可以考虑使用moz-opaque属性。下面给出的示例代码可用于页面渲染优化。但需要您注意的是,这个属性目前还没有被推广开来,只能在基于Mozilla内核的浏览器内生效。
<canvas id="mycanvas" moz-opaque></canvas>
详述
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'the-canvas-element.html#the-canvas- element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'the-canvas-element.html#the-canvas- element', '<canvas>')}} | {{Spec2('HTML5 W3C')}} | 初始定义 |
浏览器兼容性
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | {{CompatGeckoDesktop("1.8")}}[1] {{CompatGeckoDesktop("6.0")}}[2] {{CompatGeckoDesktop("12.0")}}[3] |
9.0 | 9.0[4] | 2.0[5] |
moz-opaque |
{{CompatNo}} | {{CompatGeckoDesktop("1.9.1")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatGeckoDesktop("1.8")}}[1] {{CompatGeckoDesktop("6.0")}}[2] {{CompatGeckoDesktop("12.0")}}[3] |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | 1.0 |
moz-opaque |
{{CompatGeckoMobile("1.9.1")}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[1] Gecko 5.0 {{geckoRelease("5.0")}}内核之前的浏览器,<canvas>元素的宽和高必须被设置为正整数。
[2] Prior to Gecko 6.0 {{geckoRelease("6.0")}},内核之前的浏览器,即使{{HTMLElement ("canvas")}} 元素没有宽或高都将被渲染。
[3] Before Gecko 12.0 {{geckoRelease("12.0")}}内核之前的浏览器,如果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