Summary
HTML <帆布>元素可以用来绘制图形通过脚本(通常JavaScript)。例如,它可以被用来绘制图形,使摄影作品,甚至执行动画。你可以(也应该)在<帆布>块提供替代内容。内容就会呈现在旧的浏览器不支持画布和浏览器禁用了JavaScript。
For more articles on canvas, see the canvas topic page.
- Content categories Flow content, phrasing content, embedded content, palpable content.
- Permitted content Transparent but with no interactive content descendants except for {{HTMLElement("a")}} elements, {{HTMLElement("button")}} elements, {{HTMLElement("input")}} elements whose {{htmlattrxref("type", "input")}} attribute is
checkbox
orradio
, and {{HTMLElement("input")}} elements whose {{htmlattrxref("type", "input")}} attribute isbutton
. - Tag omission {{no_tag_omission}}
- Permitted parent elements Any element that accepts phrasing_content.
- DOM interface {{domxref("HTMLCanvasElement")}}
Attributes
This element includes the global attributes.
- {{htmlattrdef("width")}}
- The width of the coordinate space in CSS pixels. Defaults to 300.
- {{htmlattrdef("height")}}
- The height of the coordinate space in CSS pixels. Defaults to 150.
{{Note("The displayed size of the canvas can be changed using a stylesheet. The image is scaled during rendering to fit the styled size.")}}
Examples
<canvas id="canvas" width="300" height="300"> Sorry, your browser doesn't support the <canvas> element. </canvas>
Specifications
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')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatGeckoDesktop("1.8")}} | 1.0 | 9.0 | 9.0 | 2.0 |
Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatGeckoMobile("1.8")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | 1.0 |
Browser-specific notes
Firefox (Gecko)
- Before Gecko 5.0 {{geckoRelease("5.0")}}, the canvas width and height were signed integers instead of unsigned integers.
- Prior to Gecko 6.0 {{geckoRelease("6.0")}}, a {{HTMLElement("canvas")}} element with a zero width or height would be rendered as if it had default dimensions.
- Before Gecko 12.0 {{geckoRelease("12.0")}}, if JavaScript is disabled, the
<canvas>
element was being rendered instead of showing the fallback content as per the specification. Now the fallback content is rendered instead.
See also
{{HTML:Element_Navigation}}