HTML5 canvas 标签

HTML <canvas> 标签


更新时间: 09/22/2018  由sky8g编辑

在使用HTML编写时,<canvas>是一个块元素,通过使用JavaScript等脚本语言来绘制图形。当您想要动态地创建图形或执行简单的动画时,它非常有用。以下部分包含关于此标记的信息,包括其代码示例,以及相关属性和浏览器兼容性。

代码示例

<!DOCTYPE HTML>
<html>
<body>

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

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

</body>
</html>

显示如下

属性

在HTML标记中,属性指示HTML元素的某些方面。属性由名称和值对组成;所有标签都支持标准属性。下表显示了

属性 描述
height 指定画布的高度
width 指定画布的宽度

兼容性

Internet Explorer Firefox Safari Opera Chrome
9.0+ 2.0+ 3.1+ 9.0+ 4.0+