HTML <canvas> 标签
示例
实时绘制一个红色矩形，并将其显示在 <canvas> 元素内
<canvas id="myCanvas">
您的浏览器不支持 canvas 标签。
</canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
<canvas> 标签用于通过脚本（通常是 JavaScript）实时绘制图形。
<canvas> 标签是透明的，它只是图形的容器，您必须使用脚本来实际绘制图形。
<canvas> 元素内的任何文本都将显示在禁用 JavaScript 的浏览器和不支持 <canvas> 的浏览器中。
提示和注释
提示: 在我们的 HTML Canvas 教程中了解更多关于 <canvas> 元素的信息。
提示: 有关所有属性和方法的完整参考，请访问我们的 HTML Canvas 参考手册。
浏览器支持
表格中的数字表示完全支持该元素的首个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
属性
| Attribute | 值 | 描述 |
|---|---|---|
| height | 像素 | 指定画布的高度。默认值为 150 |
| width | 像素 | 指定画布的宽度。默认值为 300 |
全局属性
<canvas> 标签还支持 HTML 中的全局属性。
事件属性
<canvas> 标签还支持 HTML 中的事件属性。
更多示例
示例
另一个 <canvas> 示例
<canvas id="myCanvas">
您的浏览器不支持 canvas 标签。
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//开启透明度
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
自己动手试一试 »
默认 CSS 设置
大多数浏览器将以以下默认值显示 <canvas> 元素
