楼主在复现这个开源的小游戏时,发现了在外挂.js文件时,无法设置画布居中,总是会报错。
(Uncaught TypeError: Cannot read property ‘getContext’ of null)
教学代码请点击这里:实验楼小游戏教学链接
html代码如下图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>追逐游戏</title>
<style type="text/css">
canvas{
margin:0 auto;
border:1px solid pink;
position: absolute;
left: 550px;
top: 50px;
}
</style>
</head>
<body>
<!-- <script src="jquery-1.11.1.js"></script> -->
<canvas id="cvs" width="512" height="480"></canvas>
<script src="game.js"></script>
</body>
</html>
我简单地使用css样式中的绝对定位,来设置canvas标签的位置,以及边框。在使用canvas的getcontext(“2d”)的时候,出现Uncaught TypeError: Cannot read property ‘getContext’ of null 错误。
解决方法1:
原因可能是在html页面加载之前就运行了js,所以我们引入jquery,使用
$(document).ready(function(){
});
在这里面写canvas代码就可以了。
解决方法2:
将script放在canvas之后引入,因为chrome下需要文档载入完成后才能获得canvas对象,则不会报错。
小游戏的代码:https://github.com/zdpmgz/canvas-game