未捕获的类型错误：无法读取 null 的属性“getContext”
Posted
技术标签:
【中文标题】未捕获的类型错误：无法读取 null 的属性“getContext”【英文标题】：Uncaught TypeError: Cannot read property 'getContext' of null 【发布时间】：2014-11-07 19:43:00 【问题描述】：在我的控制台中，我收到错误：“未捕获的 TypeError：无法读取属性 'getContext' of null” 我就是找不到我犯的错误……或者我做错了什么。 所以也许你可以帮我找到它？ 请帮忙:)
enter code here
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var cW = canvas.width = 1000;
var cH = canvas.height = 500;
var particleAmount = 10;
var particles = [];
for(var i=0;i<particleAmount;i++)
particles.push(new particle());
function particle()
this.x = (Math.random() * (cW-(40*2))) + 40;
this.y = (Math.random() * (cH-(40*2))) + 40;
this.xv = Math.random()*20-10;
this.yv = Math.random()*20-10;
function draw ()
ctx.fillStyle = "black";
ctx.fillRect(0,0,cW,cH);
for(var ii=0;ii<particles.length;ii++)
var p = particles[ii];
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(p.x,p.y,40,Math.PI*2,false);
ctx.fill();
setInterval(draw,30);
【问题讨论】：
您确定要在 DOM 准备就绪时加载脚本吗？ 这是我的 html 代码：该错误基本上意味着 HTML 和 javascript 代码不能正常协作，或者只是您没有正确加载脚本。 试试这个：
function init()
// Run your javascript code here
// Run the 'init' function when the DOM content is loaded
document.addEventListener("DOMContentLoaded", init, false);
希望这会有所帮助。
【讨论】：
【参考方案2】：答案就在问题后面的 cmets 中！其他人也在下面发布了它作为答案，但所有学分都归于：@elclanrs
“对，所以画布还不存在。在画布元素之后加载脚本。– elclanrs 2014 年 9 月 13 日 22:43”
【讨论】：
【参考方案3】：我想你把脚本标签放在画布标签上面请把它放在画布标签后面。
【讨论】：
【参考方案4】：将脚本文件放在画布之后。这意味着把你的脚本放在body标签之前。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<link rel="shortcut icon" href="assets/1.png">
<link rel="stylesheet" href="assets/canvas.css">
</head>
<body>
<div class="container">
<h2>Canvas</h2>
<canvas id="myCanvas" >
</canvas> <!-- End Canvas -->
</div> <!-- End Container -->
<script src="canvas.js"></script>
</body>
</html>
【讨论】：
【参考方案5】：尝试在脚本标签之前声明画布元素。对我来说效果很好。
【讨论】：
以上是关于未捕获的类型错误：无法读取 null 的属性“getContext”的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取 null 的属性“getContext”
为啥我会收到此错误：未捕获的类型错误：无法读取 null 的属性 'classList'
未捕获的类型错误：在输入单击时无法读取 null 的属性“样式”