HTML5 <canvas> 标签
主题：HTML5 标签参考上一页|下一页
说明
<canvas> 元素定义文档中的一个区域，该区域可用于通过脚本（通常是 JavaScript）动态绘制图形。 例如，它可用于绘制路径和形状、图形甚至执行动画。
下表总结了此标签的使用上下文和版本历史。
| Placement: | Inline |
|---|---|
| Content: | 内嵌和文本 |
| 开始/结束标签： | 开始标签： required, 结束标签：required |
| 版本： | New in HTML5 |
语法
<canvas> 标签的基本语法如下：
HTML / XHTML: <canvas> ... </canvas>
下面的例子展示了 <canvas> 标签的作用。
<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>注意：您可以（并且应该）在画布元素内提供替代内容。 该内容将在不支持画布的旧浏览器和禁用 JavaScript 的浏览器中呈现。
标签特定属性
下表显示特定于 <canvas> 标签的属性。
| 属性 | 值 | 说明 |
|---|---|---|
width |
pixels | 设置画布的宽度。 |
height |
pixels | 设置画布的高度。 |
全局属性
与所有其他 HTML 标签一样， <canvas> 标签支持 HTML5 中的全局属性。
事件属性
<canvas> 标签还支持 HTML5 中的事件属性。
浏览器兼容性
所有主要的现代浏览器都支持 <canvas> 标签。
 |
基本支持—
|
进一步阅读
请参阅以下教程： HTML5 画布.
相关标签： <script>.
Advertisements