©
本文档使用
php.cn手册 发布
<canvas>元素可被用来通过脚本（通常是JavaScript）绘制图形。
内容类别 | 流量内容，措辞内容，嵌入内容，可触及的内容。 |
|---|---|
允许的内容 | 除<元素，<按钮>元素，<type>属性为复选框，收音机或按钮的<input>元素外，透明但没有交互式内容的后代。 |
标记遗漏 | 没有，起始和结束标签都是强制性的。 |
允许父母 | 任何接受phrasing_content的元素。 |
允许ARIA角色 | 任何 |
DOM界面 | HTMLCanvasElement |
属性
本元素支持 全局属性.
height该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。
moz-opaque通过设置这个属性，来控制canvas元素是否半透明。如果你不想canvas元素被设置为半透明，使用这个元素将可以优化浏览器绘图性能。
width该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。
注意事项
可替代的内容
你可以（也应该）在<canvas>块内提供备用内容。该内容将在不支持画布的旧浏览器和禁用JavaScript的浏览器中呈现。
需要</canvas> 标签
不同于 <img> 元素, <canvas>元素需要有闭合标签 (</canvas>).
设置画布(canvas)的大小
可以通过CSS来控制<canvas>的大小。在渲染的过程中<canvas>元素中的内容会根据情况缩放来适应需要的大小。如果您发现<canvas>元素中展示的内容变形，您可以通过<canvas>自带的height和width属性进行相关设置，而不要使用CSS。
示例
这个代码片段为您的HTML文档添加一个画布元素。如果浏览器无法渲染画布，或者无法读取画布，则会提供后备文本。提供有用的后备文本或子DOM，更易于访问画布。
<canvas id="canvas" width="300" height="300"> An alternative text describing what your canvas displays. </canvas>
如果你没有设置<canvas>元素的透明度，可以考虑使用moz-opaque属性。下面给出的示例代码可用于页面渲染优化。但需要您注意的是，这个属性目前还没有被推广开来，只能在基于Mozilla内核的浏览器内生效。
<canvas id="myCanvas" moz-opaque></canvas>
规范
规范 | 状态 | 评论 |
|---|---|---|
HTML生活标准该规范中'<canvas>'的定义。 | 生活水平 | |
HTML5该规范中'<canvas>'的定义。 | 建议 | 初始定义 |
浏览器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic Support | 1 | (Yes) | 1.51 2 3 | 9 | 9 | 24 |
height | 1 | (Yes) | 1.51 2 3 | 9 | 9 | 24 |
moz-opaque | No | No | 3.5 | No | No | No |
width | 1 | (Yes) | 1.51 2 3 | 9 | 9 | 24 |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
Basic Support | ? | ? | (Yes) | 1.51 2 3 | ? | No | 1 |
height | ? | ? | (Yes) | 1.51 2 3 | ? | No | 1 |
moz-opaque | No | No | No | 1 | No | No | No |
width | ? | ? | (Yes) | 1.51 2 3 | ? | No | 1 |