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