Chrome中canvas报Cannot call method 'getContext' of null

最新推荐文章于 2022-03-29 10:12:41 发布

轩辕223

最新推荐文章于 2022-03-29 10:12:41 发布

阅读量6.6k

点赞数

分类专栏： html5 canvas chrome 文章标签： chrome null html5 firefox function 优化

本文链接：https://blog.csdn.net/zgzczzw/article/details/7878294

版权

html5 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

chrome

1 篇文章 0 订阅

订阅专栏

今天在看HTML5 的CANVAS，找了一段简单的代码，敲好后，用CHROME打开，竟然报出Cannot call method 'getContext' of null 这个错误，就是说getContext这个方法没有，唉？我就纳闷啦，按理说chrome对html5支持的很好啊，应该不会有这种错误啊，查了些资料也没找到，代码如下

<html>
<head>
<script type="text/javascript"> 
	var canvas=document.getElementById("screen");
	var ctx=canvas.getContext("2d");
	ctx.fillStyle="#f00";
	ctx.fillRect(30,40,80,100);
	
</script>  
</head>
<body οnlοad="onReady()">
<canvas id="screen" width="600" height="400"> 
</canvas> 
</body>
</html>

后来，我想了很久，觉得是不是因为js先于页面载入，还没有canvas属性啊，于是改改看

<html>
<head>
<script type="text/javascript"> 
function onReady(){
	var canvas=document.getElementById("screen");
	var ctx=canvas.getContext("2d");
	ctx.fillStyle="#f00";
	ctx.fillRect(30,40,80,100);
	}
</script>  
</head>
<body οnlοad="onReady()">
<canvas id="screen" width="600" height="400"> 
</canvas> 
</body>
</html>

看来就是这个问题，要在页面载入后才能获得canvas对象，这个问题在firefox不会出现，看来是做了优化，反正还是注意吧，小问题

轩辕223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Chrome中canvas报Cannot call method 'getContext' of null

今天在看HTML5 的CANVAS，找了一段简单的代码，敲好后，用CHROME打开，竟然报出Cannot call method 'getContext' of null 这个错误，就是说getContext这个方法没有，唉？我就纳闷啦，按理说chrome对html5支持的很好啊，应该不会有这种错误啊，查了些资料也没找到，代码如下 var canvas=document.getElem
复制链接

扫一扫