Javascript 帆布火花线

我想创建一个不同长度的火花线，并通过将它们从画布的中心移动到末端来设置动画，这个过程必须在画布上循环。为了实现这一点，我从粒子系统开始

请检查下面的代码，这是代码笔链接

window.onload=function（）{
var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
w=canvas.width=window.innerWidth，
h=canvas.height=window.innerHeight，
centerX=w/2，
centerY=h/2，
速度=0，
时间=0，
numObjects=5，
x、 y，vx，vy，life，maxLife；
变量行={}，
lineIndex=0；
函数行（）{
此.x=中心x；
这个。y=中心；
this.vx=Math.random（）*16-8；
this.vy=Math.random（）*16-8；
这就是生命=0；
this.maxLife=Math.random（）*10+20；
lineIndex++；
行[行索引]=此；
this.id=lineIndex；
}
Line.prototype.draw=函数（）{
this.x+=this.vx；
this.y+=this.vy；
这就是生活；
如果（this.life>=this.maxLife）{
删除行[this.id]；
}
context.fillStyle=“#000”；
context.fillRect（this.x，this.y，3,3）
}
setInterval（函数（）{
context.fillStyle='rgba（255255.05）'；
fillRect（0,0,w,h）；
新行（）；
用于（行中的var i）{
线条[i].draw（）；
}
}, 30)
};
正文{
溢出：隐藏；
保证金：0；
填充：0；
}
帆布{
显示：块；
}
这里有一种方法…

使用线条可以获得更连续的效果：


我对代码所做的更改是跟踪起点和终点


window.onload=function（）{
var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
w=canvas.width=window.innerWidth，
h=canvas.height=window.innerHeight，
centerX=w/2，
centerY=h/2；
变量行={}，
lineIndex=0；
函数行（）{
this.start={x:centerX，y:centerY}；
this.end={x:centerX，y:centerY}；
this.vx=Math.random（）*16-8；
this.vy=Math.random（）*16-8；
这就是生命=0；
this.maxLife=Math.random（）*10+20；
lineIndex++；
行[行索引]=此；
this.id=lineIndex；
}
Line.prototype.draw=函数（）{
this.end.x+=this.vx；
this.end.y+=this.vy；
这就是生活；
如果（this.life>=this.maxLife）{
删除行[this.id]；
}
//context.fillStyle=“#000”；
//context.fillRect（this.x，this.y，1,1）
context.beginPath（）；
moveTo（this.start.x，this.start.y）；
context.lineTo（this.end.x，this.end.y）；
context.lineWidth=1；
stroke（）；
context.strokeStyle=“#000”；
}
setInterval（函数（）{
context.fillStyle='rgba（255255.05）'；
fillRect（0,0,w,h）；
新行（）；
用于（行中的var i）{
线条[i].draw（）；
}
}, 30)
};
正文{
溢出：隐藏；
保证金：0；
填充：0；
}
帆布{
显示：块；
}
为什么不能直接执行
context.lineTo（this.x，this.y）？此外，如果线条有不同的长度，它们如何都接触到中心和端点？不管怎样，他们都应该碰一个人吗？非常感谢分享。非常感谢。在这里，直线从中心向动态x和y方向延伸。但是如果我有一组长度不同的线，每一条线的起始位置都在画布中心，需要在x，y和z轴上移动它们，如果一条线从（0，0）开始，移动到（30，120），我必须将整条线移出画布。减少X和增加Y，这使线对象必须沿Z轴移动。希望对上述问题能更精确，标枪投掷是最好的视觉例子。一群人把一根棍子扔在同一个地方，每根棍子的目的地都不一样。这里的点只是在变化，而不是树枝在生长。但是，我不知道如何使用canvas实现同样的效果。@Yesvinkumar抱歉，我不确定我是否理解您的问题，您能否给我指一段视频，显示您需要的内容。。。同样，你应该考虑使用3D的任何3D效果。JS：样本GIF已经被附加在问题本身中，你也可以在Z轴上的样本总画布运动中找到（这不是必需的）。如何为每一行带来动画。@ Yesvinkumar看你的动画，我想你要创建一个动画，创造一个透视效果，你应该认真考虑这三个，这是一个例子，我把它的一些例子修改在一起：