最适合网络开发者的网站
HTML5。英语版 W3Schools。完整标签指南

尿素

HTML <canvas> 标签


例子

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

<canvas id="myCanvas">
您的浏览器不支持canvas标签。
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.填充样式 = “#FF0000”;
ctx.填充Rect(0, 0, 80, 80);
</script>
亲自尝试 »

下面有更多“自己尝试”的示例。


定义和用法

<canvas> 标签用于通过脚本(通常是 JavaScript)动态绘制图形。

<canvas> 标签是透明的,仅仅是一个图形的容器,必须使用脚本来真正绘制图形。

任何文本在 <canvas> 元素将显示在禁用 JavaScript 的浏览器和不支持的浏览器中<canvas>.


提示和说明

提示: 详细了解<canvas> 我们的元素HTML Canvas 教程.

提示: 有关所有属性和方法的完整参考,请访问我们的HTML Canvas 参考.


浏览器支持

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

元素
<canvas> 4.0 9.0 2.0 3.1 9.0

属性

属性 价值 描述
高度 像素 指定画布的高度。默认值为 150
宽度 像素 指定画布的宽度默认值为 300

全局属性

<canvas> 标签还支持HTML 中的全局属性.


事件属性

<canvas> 标签还支持HTML 中的事件属性.


更多示例

例子

其他<canvas>例子:

<canvas id="myCanvas">
您的浏览器不支持canvas标签。
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle =“红色”;
ctx.填充Rect(20, 20, 75, 50);
//打开透明度
ctx.全局Alpha = 0.2;
ctx.fillStyle =“蓝色”;
ctx.填充矩形(50, 50, 75, 50);
ctx.fillStyle =“绿色”;
ctx.填充矩形(80,80,75,50);
</script>
亲自尝试 »

默认 CSS 设置

大多数浏览器会显示 <canvas> 元素具有以下默认值:

例子

帆布 {
高度:150px;
宽度:300px;
}
亲自尝试 »