Javascript 在画布中更改动画中的形状

我已经有了代码集，但是在这里输入代码我想把矩形改成圆形，但是当我把rect（）改成arc（）时，代码就不起作用了。 我添加了方法c.arc（this.x，this.y，10,0,2*Math.PI）和笔划（） 方法，但随后结果输出消失。 如果您可以更改形状并自定义代码，这将非常有用

黑暗的
window.onload=函数（）{
//创建画布
var canvas=document.createElement（“画布”），
c=canvas.getContext（“2d”）；
var粒子={}；
var particleIndex=0；
var particleNum=15；
//设置画布大小
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
//将画布添加到主体
document.body.appendChild（画布）；
//设计画布的样式
c、 fillStyle=“黑色”；
c、 fillRect（0，0，canvas.width，canvas.height）；
函数粒子（）{
这个.x=canvas.width/2；
这个.y=canvas.height/2；
this.vx=Math.random（）*10-5；
this.vy=Math.random（）*10-5；
这个重力=0.3；
particleIndex++；
粒子[particleIndex]=这个；
this.id=particleIndex；
这就是生命=0；
this.maxLife=Math.random（）*30+60；
this.color=“hsla（“+parseInt（Math.random（）*360,10）+”，90%，60%，0.5”；
}
Particle.prototype.draw=函数（）{
this.x+=this.vx；
this.y+=this.vy；
if（Math.random（）<0.1）{
this.vx=Math.random（）*10-5；
this.vy=Math.random（）*10-5；
}
这就是生活；
如果（this.life>=this.maxLife）{
删除粒子[this.id]；
}
c、 fillStyle=this.color；
c、 fillRect（this.x，this.y，5,10）；
};
setInterval（函数（）{
//在带有黑色背景的画布上绘制之前的正常设置
c、 globalCompositeOperation=“源代码结束”；
c、 fillStyle=“rgba（0,0,0,0.5）”；
c、 fillRect（0，0，canvas.width，canvas.height）；
对于（var i=0；i

首先：HTML中不需要画布元素，因为画布是在JS中动态创建的

第二：您添加了方法arc，但可能忘记添加c.fill（）

window.onload=function（）{
//创建画布
var canvas=document.createElement（“画布”），
c=canvas.getContext（“2d”）；
var粒子={}；
var particleIndex=0；
var particleNum=15；
//设置画布大小
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
//将画布添加到主体
document.body.appendChild（画布）；
//设计画布的样式
c、 fillStyle=“黑色”；
c、 fillRect（0，0，canvas.width，canvas.height）；
函数粒子（）{
这个.x=canvas.width/2；
这个.y=canvas.height/2；
this.vx=Math.random（）*10-5；
this.vy=Math.random（）*10-5；
这个重力=0.3；
particleIndex++；
粒子[particleIndex]=这个；
this.id=particleIndex；
这就是生命=0；
this.maxLife=Math.random（）*30+60；
this.color=“hsla（“+parseInt（Math.random（）*360,10）+”，90%，60%，0.5”；
}
Particle.prototype.draw=函数（）{
this.x+=this.vx；
this.y+=this.vy；
if（Math.random（）<0.1）{
this.vx=Math.random（）*10-5；
this.vy=Math.random（）*10-5；
}
这就是生活；
如果（this.life>=this.maxLife）{
删除粒子[this.id]；
}
c、 fillStyle=this.color；
//c、 fillRect（this.x，this.y，5,10）；
c、 beginPath（）；
c、 弧（this.x，this.y，2.5,0,2*Math.PI）；
c、 填充（）；
};
setInterval（函数（）{
//在带有黑色背景的画布上绘制之前的正常设置
c、 globalCompositeOperation=“源代码结束”；
c、 fillStyle=“rgba（0,0,0,0.5）”；
c、 fillRect（0，0，canvas.width，canvas.height）；
对于（var i=0；i

---

<代码>正文{边距：0；填充：0 } <代码>。我很高兴它有帮助。在这种情况下，请考虑接受我的回答。我还想把一个单独的文件从所有脚本加载到这里，我只希望Weln.OnLoad＝函数（）存在于HTML中。