Javascript 如何在笔记本电脑上运行粒子设计？

我一直在尝试使用这个网站上的一些粒子设计

https://speckyboy.com/particle-animation-code-snippets/

但是失败了。我已经包括了样式表和javascript文件。我不确定我错过了什么。此外，这在django项目上也不起作用。这些粒子设计和django之间有限制吗

错误：

未捕获的TypeError:无法在处读取null的属性“getContext” js:2

var canvas=document.querySelector（“场景”），
ctx=canvas.getContext（“2d”），
粒子=[]，
金额=0，
鼠标={
x:0,，
y:0
},
半径=1；
变量颜色=[“468966”、“FFF0A5”、“FFB03B”、“B64926”、“8E2800”]；
var copy=document.querySelector（“复制”）；
var ww=canvas.width=window.innerWidth；
var wh=canvas.height=window.innerHeight；
函数粒子（x，y）{
this.x=Math.random（）*ww；
this.y=Math.random（）*wh；
this.dest={
x:x，
y:y
};
this.r=Math.random（）*5+2；
this.vx=（Math.random（）-0.5）*20；
this.vy=（Math.random（）-0.5）*20；
这是accX=0；
这个.accY=0；
this.摩擦力=数学随机（）*0.05+0.94；
this.color=colors[Math.floor（Math.random（）*6）]；
}
Particle.prototype.render=函数（）{
this.accX=（this.dest.x-this.x）/1000；
this.accY=（this.dest.y-this.y）/1000；
this.vx+=this.accX；
this.vy+=this.accY；
this.vx*=this.摩擦力；
this.vy*=this.摩擦力；
this.x+=this.vx；
this.y+=this.vy；
ctx.fillStyle=this.color；
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.r，Math.PI*2，false）；
ctx.fill（）；
var a=this.x-mouse.x；
var b=this.y-mouse.y；
变量距离=数学sqrt（a*a+b*b）；
如果（距离<（半径*70））{
this.accX=（this.x-mouse.x）/100；
this.accY=（this.y-mouse.y）/100；
this.vx+=this.accX；
this.vy+=this.accY；
}
}
移动鼠标的功能（e）{
mouse.x=e.clientX；
mouse.y=e.clientY；
}
移动功能（e）{
如果（e.e.length>0）{
mouse.x=e.touchs[0].clientX；
mouse.y=e.touchs[0].clientY；
}
}
函数onTouchEnd（e）{
鼠标.x=-9999；
鼠标.y=-9999；
}
函数initScene（）{
ww=canvas.width=window.innerWidth；
wh=canvas.height=window.innerHeight；
clearRect（0，0，canvas.width，canvas.height）；
ctx.font=“bold”+（ww/10）+“px无衬线”；
ctx.textAlign=“中心”；
ctx.fillText（copy.value，ww/2，wh/2）；
var data=ctx.getImageData（0，0，ww，wh）.data；
clearRect（0，0，canvas.width，canvas.height）；
ctx.globalCompositeOperation=“屏幕”；
粒子=[]；
对于（变量i=0；i150）{
推（新粒子（i，j））；
}
}
}
数量=颗粒长度；
}
函数onMouseClick（）{
radius++；
如果（半径==5）{
半径=0；
}
}
函数渲染（a）{
请求动画帧（渲染）；
clearRect（0，0，canvas.width，canvas.height）；
对于（变量i=0；i
正文{
保证金：0；
溢出：隐藏；
字号：0；
}
帆布{
背景：黑色；
宽度：100vw；
高度：100vh；
}
输入{
宽度：250px；
高度：40px；
线高：40px；
位置：绝对位置；
底部：35px；
左：计算（50%-125px）；
背景：无；
颜色：白色；
字体大小：30px；
字体系列：arial；
文本对齐：居中；
边框：1px纯白；
背景：rgba（255，255，255，0.2）；
}
p{
位置：固定；
左：0；
底部：5px；
颜色：#fff；
z指数：10；
字体大小：16px；
字体系列：Helvetica、Verdana、无衬线；
不透明度：0.5；
宽度：100%；
文本对齐：居中；
保证金：0；
}

单击任意位置更改鼠标半径
得到的错误说明一切。不能对
null
上下文调用
.getContext（）
。在这种情况下，
canvas
为空，因为
标记插入在
标记之前。同样，您不能在
copy
上调用
.addEventListener（）
，因为copy元素也位于
标记之后

您有几个选项，但最简单的是颠倒顺序

<canvas id="scene"></canvas>
<input id="copy" type="text" value="Hello Codepen ♥" />

<!-- put this after the other tags -->
<script src="javascript.js"></script>



为便于将来参考，请仔细查看错误消息并进行查找。我相信，如果您花一点额外的时间来破译它，您可以自己解决这个问题。
您的浏览器控制台/调试器对此有何评论？@Ry-对不起，忘了包括它。``未捕获的TypeError:无法在javascript.js:2读取null的'getContext'属性``将
标记放在
标记之后，或者第一行中的
canvas
变量为
null
，导致出现错误。您需要在
标记后插入
标记。这给了我另一个错误未捕获的TypeError:无法在javascript.js:121``处读取null的属性'addEventListener'，该属性有效！我对HTML/CSS/Javascript不是很精通，所以还在学习。非常感谢你的帮助@没问题。很高兴在学习web开发的路上看到您！