当前位置:首页>HTML>HTML标签>HTML <canvas> 标签

HTML <canvas> 标签

作者:微学网发布时间:2019-08-25 17:24:25

示例

在运行中绘制一个红色正方形,并将其显示在<canvas>元素中:

<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

定义和用法

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

<canvas>标签只是图形的容器,您必须使用脚本来实际绘制图形。

浏览器支持

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

Chrome Firefox IE Safari Opera
Google Chrome Firefox Internet Explorer Safari Opera
支持 支持 支持 支持 支持
4.0 2.0 9.0 3.1 9.0

注意: Internet Explorer 8和早期版本不支持<canvas>标记。

HTML 4.01和HTML5之间的差异

<canvas>标记是HTML5中的新标记。

提示和注意事项

注意: <canvas>元素中的任何文本都将显示在不支持<canvas>的浏览器中。

提示:了解有关HTML Canvas教程中 <canvas>元素的更多信息 。

提示:有关可与canvas对象一起使用的所有属性和方法的完整参考,请转到我们的 HTML Canvas 手册。

属性

html5= HTML5中的新功能。

属性 描述
height html5 pixels 规定画布的高度。
width html5 pixels 规定画布的宽度。

全局属性

<canvas>标记还支持HTML中的全局属性。

事件属性

<canvas>标记还支持HTML中的事件属性。

默认CSS设置

没有。