JavaScript——关于画布元素canvas的使用_H5之家 - 中国HTML5教程资源分享第一站

canvas教程

JavaScript——关于画布元素canvas的使用

字号+ 作者：H5之家来源：H5之家 2017-12-04 13:05 我要评论( )

在chrome中使用getContext()方法来判断某一浏览器是否支持canvas元素时，使用了如下方法在页面中绘制一个指定大小的矩形。 !DOCTYPE html head title/title meta

在chrome中使用getContext()方法来判断某一浏览器是否支持<canvas>元素时，使用了如下方法在页面中绘制一个指定大小的矩形。

<!DOCTYPE >

<html>
<head>
<title></title>
<meta charset='UTF-8'>
<script type="text/javascript">
var drawing=document.getElementById("drawing");
if(drawing.getContext){
var context=drawing.getContext("2d");
context.fillStyle="red";
context.fillRect(10,10,50,50);
}
</script>
</head>
<body>
<canvas>HaHa</canvas>
</body>
</html>

打开网页之后没有实际的显示效果。后来通过调用chrome中的调试工具Sources窗口，在Console控制台中发现了一个错误提示：Cannot read property 'getContext' of null。经过查找发现chrome中需要等待文档载入完成之后才能够获得canvas对象。将javascript的代码移到<body>标签的最后，就可以实现对应的功能。