使用canvas绘制图形,步骤
- 获取canvas对象
- 获取上下文环境对象context
- 开始绘制图形
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="200" height='150' style="border:1px dashed gray;"></canvas>
</body>
<script type="text/javascript">
window.onload= function(){
//获取canvas对象
var cnv = document.getElementById("canvas");
//获取上下文环境对象
var cxt = cnv.getContext("2d");
//开始绘制
cxt.moveTo(50,100);
cxt.lineTo(150,50);
cxt.stroke();
}
</script>
</html>
注意:
- canvas是块元素
- 在设置canvas宽/高度时可以在HTML属性中定义也可以在css样式中定义,但在实际开发中一定不要在css中定义。因为canvas本身有默认的宽、高度。
- canvas目前对于IE只支持IE9以上的版本。对于IE7/8可以借助explorecanvas这个扩展解决(下载地址)。然后引入excanvas.js。