解决canvas小游戏设置画布居中时，js中报错的问题

最新推荐文章于 2022-11-15 12:38:05 发布

还是那个zpp

最新推荐文章于 2022-11-15 12:38:05 发布

阅读量414

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/aaaaa1994/article/details/82841651

版权

学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

楼主在复现这个开源的小游戏时，发现了在外挂.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 错误。
　　
解决方法１：
　　原因可能是在html页面加载之前就运行了js，所以我们引入jquery，使用
$(document).ready(function(){

});
在这里面写canvas代码就可以了。

解决方法２：
　　将script放在canvas之后引入，因为chrome下需要文档载入完成后才能获得canvas对象，则不会报错。
　　
小游戏的代码：https://github.com/zdpmgz/canvas-game