TypeError: canvas is null

最新推荐文章于 2025-04-14 10:08:25 发布

最新推荐文章于 2025-04-14 10:08:25 发布 · 1k 阅读

文章标签：

#javascript #游戏 #ViewUI

本文详细介绍了HTML5 canvas在静态页面中先加载JS再加载元素导致无法获取元素ID的问题，并提供了将JS部分独立成JS文件并在页面元素中引入的解决方法。

1、错误描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
   body{
	   background-color:#dddddd;
   }
   #canvas{
	   margin:20px;
	   padding:20px;
	   background-color:#FFFFFF;
	   border:thin inset #AAAAAA;
   }
</style>
<script type="text/javascript">
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext('2d');
	
	context.font = "38px 微软雅黑";
	context.fillStyle = "cornflowerblue";
	context.strokeStyle = "blue";
	context.fillText('文件',canvas.width/2,canvas.height/2);
	context.strokeText('内容',canvas.width/3,canvas.height/3);
</script>
</head>

<body>
	<canvas id="canvas" width="400" height="300">
         HTML5
    </canvas>
</body>
</html>

2、错误原因

由错误提示可知，canvas为空；根据判断，静态页面中先加载了页面中JS，然后再加载页面元素，导致无法获取到元素的ID

3、解决办法

将JS部分独立成JS文件，然后在页面元素中引入

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
   body{
	   background-color:#dddddd;
   }
   #canvas{
	   margin:20px;
	   padding:20px;
	   background-color:#FFFFFF;
	   border:thin inset #AAAAAA;
   }
</style>

</head>

<body>
	<canvas id="canvas" width="400" height="300">
         HTML5
    </canvas>
    <script type="text/javascript" src="ex.js"></script>
</body>
</html>

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
	
context.font = "38px 微软雅黑";
context.fillStyle = "cornflowerblue";
context.strokeStyle = "blue";
context.fillText('文件',canvas.width/2,canvas.height/2);
context.strokeText('内容',canvas.width/3,canvas.height/3);