在我的控制台中，我收到错误：“未捕获类型错误：无法读取 null 的属性‘getContext’” 我就是找不到我犯的错误......或者我做错了什么。 那么也许你可以帮我找到它？ 请帮忙:)
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);
这是我的html代码：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vector_5</title>
<script src="Test_Particle.js"></script>
</head>
<body>
<canvas id="myCanvas" ></canvas>
</body>
</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);
希望这有帮助。
画布尚不存在。在canvas元素之后加载脚本。
来源：elclanr 的评论 2014 年 9 月 13 日 22:43
我认为您将脚本标签放在画布标签上方，请将其放在画布标签之后。
将脚本文件放在画布后面。这意味着将您的脚本放在正文标记之前。
<!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>
尝试在 script 标签之前声明 canvas 元素。对我来说效果很好。