码迷,mamicode.com
首页 > 其他好文 > 详细

TypeError: canvas is null

时间:2015-10-17 23:47:57      阅读:326      评论:0      收藏:0      [点我收藏+]

标签:html5   canvas   

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);


版权声明:本文为博主原创文章,未经博主允许不得转载。

TypeError: canvas is null

标签:html5   canvas   

原文地址:http://blog.csdn.net/you23hai45/article/details/49208655

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!