©
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
<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>).
可以通过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 |