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>
尝试一下 »
下面还有更多“尝试一下”的示例。
定义和用法
The <canvas> 标签用于通过脚本（通常是 JavaScript）动态绘制图形。
The <canvas> 标签是透明的，它只是一个图形容器，您必须使用脚本才能实际绘制图形。
在 JavaScript 被禁用且不支持 <canvas> 的浏览器中，<canvas> 元素内的任何文本都将显示。
提示和注意事项
提示：在我们的 HTML 画布教程 中了解有关 <canvas> 元素的更多信息。
提示：有关所有属性和方法的完整参考，请访问我们的 HTML 画布参考。
浏览器支持
表中的数字指定完全支持该元素的第一个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
属性
| 属性 | 值 | 描述 |
|---|---|---|
| height | 像素 | 指定画布的高度。默认值为 150 |
| width | 像素 | 指定画布的宽度。默认值为 300 |
全局属性
The <canvas> 标签还支持 HTML 中的全局属性。
事件属性
The <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> 元素
