码农教程 - 一技在手,衣食无忧! tools

HTML <canvas> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

动态绘制一个红色矩形，并将其显示在 <canvas> 元素内：

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</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 的浏览器和不支持 JavaScript 的浏览器中显示<canvas>。

提示和注释

提示：了解更多关于<canvas>我们的元素HTML 画布教程。

提示：有关所有属性和方法的完整参考，请访问我们的HTML 画布参考。

浏览器支持

表中的数字指定完全支持该元素的第一个浏览器版本。

Element
<canvas> 4.0 9.0 2.0 3.1 9.0

属性

Attribute Value Description
height pixels Specifies the height of the canvas. Default value is 150
width pixels Specifies the width of the canvas Default value is 300

全局属性

这个<canvas>标签还支持HTML 中的全局属性。

事件属性

这个<canvas>标签还支持HTML 中的事件属性。

更多示例

示例

另一个 <canvas> 示例：

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
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>具有以下默认值的元素：

示例

canvas {
  height: 150px;
  width: 300px;
}
亲自试一试 »

❮上一节 完整的 HTML参考 下一节❯