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>
元素具有以下默认值: