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

在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 id="drawing" width="200" height="200" style=" background:yellow ">HaHa</canvas>
</body>
</html>

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

你可能感兴趣的:(JavaScript,canvas,dom)