HTML <canvas> 标签 - 蝴蝶教程

<canvas>标签定义和用法

<cavas>标签用于通过脚本（通常是JavaScript）动态绘制图形。
<cavas>标签只是图形的容器，您必须使用脚本来实际绘制图形。

<canvas>浏览器支持

Internet Explorer/Edge	Chrome	FireFox	Safari	Opera

9.0（含）以上支持	4.0（含）以上支持	2.0（含）以上支持	3.1（含）以上支持	9.0（含）以上支持

<canvas>实例

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas">你的浏览器不支持canvas标签。</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);

</script>

<p><strong>注意:</strong> 在IE8和更早的版本中不支持canvas标记。</p>

</body>
</html>

尝试一下

<canvas>HTML4.01和HTML5之间的差异

<canvas>标签是HTML5中的新标签。

<canvas>提示和注意事项

注意： <canvas>元素中的任何文本都将显示在不支持<canvas>的浏览器中。
提示：了解有关HTML Canvas教程中<canvas>元素的更多信息。
提示：有关可与canvas对象一起使用的所有属性和方法的完整参考，请转到我们的 HTML 画布参考。

<canvas>属性值

属性名	属性值	描述
height	pixels	指定画布的高度
width	pixels	指定画布的宽度

<canvas>全局属性

<canvas>标签还支持全局属性。

查看有关全局属性的更多知识。

<canvas>事件属性

<canvas>标签还支持事件属性。

查看有关事件属性的更多知识。

<canvas>默认CSS设置

canvas { 
    height: 150px;
    width: 300px;
}