Javascript 创建颜色方面的多行粒子

我正在使用Canvas和JavaScript创建粒子动画。当前，粒子是从发射器随机生成的&沿一个方向（从右上角到左下角）下落。碰撞检测效果也适用于鼠标悬停

问题是：
我想创建单独的颜色多行粒子（例如：-蓝色粒子应在单独的一行中，红色粒子应在单独的一行中）。 我怎样才能做到这一点

对不起，画得不好，任何参考都会很有用。先谢谢你

（函数（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
window.requestAnimationFrame=requestAnimationFrame；
})();
var particleArr=[]，
canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
片数=700，
mouseX=-100，
老鼠=-100，
X倍增管=0.015
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
风险值率=0.07788656582264941；
函数getRandomColor（）{
//随机颜色生成
const colorArr=[“rgba（215,88,69,1）”，“rgba（117161199,1）”；//蓝色和橙色
const randomColor=colorArr[Math.floor（Math.random（）*colorArr.length）]；
返回随机颜色；
}
函数流（）{
clearRect（0，0，canvas.width，canvas.height）；
对于（变量i=0；iflake.velX=-xMultiplier*canvas.width*temp；
//flake.opacity=（Math.random（）*0.5）+0.3；
}
函数init（）{
对于（变量i=0；i

画布{
背景色：#000000！重要；
}
身体{
保证金：0；
溢出：隐藏；
}`

---

这似乎是一个简单的问题…与其使用

getRandomColor

根据粒子的速度向量设置颜色，不如创建两种颜色的粒子，&颜色方面的多个粒子流事实上，我对画布编程还不熟悉，如果else语句不是问题，我不明白是什么你说的速度是指你的代码吗？你在这里做什么：

flake.velY=flake.speed；

…这里：

flake.velX=-xMultiplier*canvas.width*temp；

…有人读过吗