未捕获的类型错误：无法读取 null 的属性“getContext”答案

【问题标题】：Uncaught TypeError: Cannot read property 'getContext' of null未捕获的类型错误：无法读取 null 的属性“getContext”
【发布时间】：2023-03-05 21:32:01
【问题描述】：

在我的控制台中，我收到错误：“未捕获的 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 代码： Vector_5 html>
对，所以画布还不存在。在画布元素之后加载脚本。
谢谢！！ :D 现在可以正常使用了！

标签： javascript particles

【解决方案1】：

该错误基本上意味着 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" width="400" height="300">

        </canvas> <!-- End Canvas -->
    </div> <!-- End Container -->
    <script src="canvas.js"></script>
</body>
</html>

【讨论】：

【解决方案5】：

尝试在脚本标签之前声明画布元素。对我来说效果很好。

【讨论】：