TypeError: canvas is null_H5之家 - 中国HTML5教程资源分享第一站

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

本文转载自you23hai45博客,版权归you23hai45所有