Javascript 降低画布内动画粒子的CPU消耗

我正在使用这个库zepto.min.js在画布上添加一些粒子

以下是Codepen上的结果：

我想知道是否有以下选项：

• 控制页面内的粒子数
• 减慢粒子的运动（此处的速度似乎无法正常工作）

我想要这些特别是为了降低CPU消耗。 如有任何建议，我们将不胜感激

代码如下：

（函数（$，窗口）{
变量$window=$（window）；
功能星座（画布、选项）{
变量$canvas=$（canvas），
context=canvas.getContext（'2d'），
默认值={
明星：{
颜色：“rgba（255，255，255，.5）”，
宽度：1，
随机宽度：真
},
职位：{
x:0,，
y:0
},
宽度：window.innerWidth，
高度：window.innerHeight，
速度：0.1，
长度：100，
距离：120，
半径：150，
星星：[]
},
config=$.extend（true，{}，默认值，选项）；
函数星（）{
this.x=Math.random（）*canvas.width；
this.y=Math.random（）*canvas.height；
this.vx=（config.velocity-（Math.random（）*0.5））；
this.vy=（config.velocity-（Math.random（）*0.5））；
this.radius=config.star.randomWidth？（Math.random（）*config.star.width）：config.star.width；
}
Star.prototype={
创建：函数（）{
context.beginPath（）；
弧（this.x，this.y，this.radius，0，Math.PI*2，false）；
context.fill（）；
},
设置动画：函数（）{
var i；
对于（i=0；icanvas.height）{
star.vx=star.vx；
star.vy=-star.vy；
}else if（star.x<0 | | star.x>canvas.width）{
star.vx=-star.vx；
star.vy=star.vy；
}
star.x+=star.vx；
star.y+=star.vy；
}
},
};
this.createStars=函数（）{
var length=config.length，
明星
我
clearRect（0，0，canvas.width，canvas.height）；
对于（i=0；i{
实例化（这个，选项）；
});
实例化（这个，选项）；
});
};
})（美元，窗口）；
//初始化插件
$（'星座'）.星座({
明星：{
宽度：1
},
行：{
颜色：“rgba（255，255，255，.5）”
},
长度：（窗内宽度/6），
半径：（window.innerWidth/5）
});
正文{
溢出：隐藏；
背景：#111；
}

您当然可以控制请求动画帧的帧速率，最大的收益将来自减少粒子，并将所有内容捆绑在单个rAF下。你的帖子对我来说太长了，但是要控制帧速率，请参见以下内容：您可以通过将位于代码最底部的插件初始化选项中的
length
设置为另一个数字来控制粒子/恒星的数量。更改选项中的
速度
的原因表明没有任何效果，这是由于
Math.random的巨大影响（）*0.5
当计算
vx
和
vy
时。您可以使用
Math.random（）*速度> <代码>，而不是看到一个效果。BTW。我会考虑将所有选项放入默认选项中，并在代码的最底部删除附加选项——至少在几个地方不使用它的情况下。这样，它就不会那么混乱。您可以控制请求动画帧的帧速率和BigGe。st增益将来自减少粒子数，并将所有内容捆绑在一个rAF下。您的帖子对我来说太长了，但要控制帧速率，请参见以下内容：您可以通过将代码最底部插件初始化选项中的
length
设置为另一个数字来控制粒子数/星星数。因此n为什么更改选项中的
velocity
显示无效，是因为计算
vx
和
vy
时
Math.random（）*0.5
的巨大影响。您可以使用
Math.random（）*速度> <代码>，而不是看到一个效果。BTW。我会考虑把所有选项放入默认选项中，并在代码的最底部去掉额外的选项——至少在几个地方不使用它的情况下。这样就不会那么混乱了。