javascript 未捕获的类型错误：无法读取 null 的属性“getContext”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25828426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'getContext' of null
提问by Pumpkin_M
In my console I get the error: "Uncaught TypeError: Cannot read property 'getContext' of null" and I just can't find the error I've made... or what I've done wrong. So maybe you can help me find it? Please help :)
在我的控制台中，我收到错误消息：“Uncaught TypeError: Cannot read property '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);
采纳答案by Pumpkin_M
The answer is in the comments just after the question! Someone else also posted it as an answer a bit below, but all credits to: @elclanrs
答案就在问题之后的评论中！其他人也在下面发布了它作为答案，但所有功劳都归功于：@elclanrs
"Right, so the canvas doesn't exist yet. Load the script after the canvas element. – elclanrs Sep 13 '14 at 22:43"
“是的，所以画布还不存在。在画布元素之后加载脚本。 – elclanrs 2014 年 9 月 13 日 22:43”
回答by gilbert-v
The error basically means that the HTML and the JavaScript code aren't cooperating properly, or simply that you haven't loaded the script correctly.
Try this:
该错误基本上意味着 HTML 和 JavaScript 代码没有正确协作，或者只是您没有正确加载脚本。
试试这个：
function init() {
// Run your javascript code here
}
document.addEventListener("DOMContentLoaded", init, false);
Hope this helps.
希望这可以帮助。
回答by pixellab
I think you put the script tag above of the canvas tag please put it after the canvas tag.
我想你把脚本标签放在画布标签上面，请把它放在画布标签之后。
回答by Ahmad Sharif
Put the scripts file after the canvas. That means put down your script before the body tag.
将脚本文件放在画布之后。这意味着在 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" width="400" height="300">
</canvas> <!-- End Canvas -->
</div> <!-- End Container -->
<script src="canvas.js"></script>
</body>
</html>
回答by pradeep parvathaneni
Try to declare the canvas element before the script tag. It worked fine for me.
尝试在脚本标记之前声明画布元素。它对我来说很好。
