HTML5 canvas 标签

 

 


 

HTML <canvas> 标签

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

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

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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 ExplorerFirefoxSafariOperaChrome
9.0+2.0+3.1+9.0+4.0+