无需登录 数据私有 本地保存

粒子特效生成器 - Canvas粒子动画代码

19
0
0
0
预设效果
FPS: --
粒子数: 150
150
3px
1.0
0.85
双色渐变
连线距离 150px
连线透明度 0.3
影响范围 180px
#0a0a14

常见问题与知识点

什么是Canvas粒子特效？
Canvas粒子特效是利用HTML5 Canvas API在网页上实时渲染大量微小图形（粒子），通过控制每个粒子的位置、速度、颜色、大小等属性，结合动画循环（requestAnimationFrame）创造出动态的视觉效果。粒子之间还可以通过连线、吸引、排斥等交互产生更丰富的视觉层次，广泛应用于网站背景、数据可视化、游戏开发等场景。
如何优化Canvas粒子动画的性能？
优化技巧包括：①使用requestAnimationFrame代替setInterval；②减少每帧的计算量，用距离平方比较代替开方运算；③粒子数量控制在合理范围（一般200以内可在移动端流畅运行）；④使用离屏Canvas缓存静态元素；⑤在粒子连线时设置距离阈值，超过阈值不绘制；⑥避免在循环内创建新对象；⑦使用devicePixelRatio适配时注意性能取舍。
如何将生成的粒子特效嵌入到我的网站中？
点击"导出代码"按钮即可获得完整的HTML/JavaScript代码片段。你可以将代码直接嵌入网页的任意位置，或者将其中的JavaScript部分提取出来放在独立的.js文件中引用。Canvas会自动适应其父容器的大小，因此只需确保父容器有明确的宽高即可。
粒子特效适合用作网站背景吗？
非常适合！粒子特效是流行的网站背景方案之一。使用时建议：设置较低透明度避免影响内容阅读；粒子数量适中（80-150个）；使用柔和的颜色主题；将Canvas置于背景层（z-index较低）；考虑移动端性能适当减少粒子数量。像星空、极光等主题特别适合科技类、创意类网站。
什么是requestAnimationFrame？为什么用它做动画？
requestAnimationFrame是浏览器提供的专门用于动画的API，它会在浏览器下一次重绘之前调用指定的回调函数。相比setInterval，它的优势在于：①自动匹配显示器刷新率（通常60fps），避免无效绘制；②页面不可见时自动暂停，节省资源；③与浏览器渲染周期同步，动画更流畅；④在性能较差的设备上自动降低帧率。
粒子的"吸引"和"排斥"交互是如何实现的？
当鼠标在Canvas上移动时，系统会计算每个粒子与鼠标位置的距离。在"吸引"模式下，粒子会受到一个指向鼠标的力，距离越近力越大；在"排斥"模式下则相反，粒子被推离鼠标；"环绕"模式则给粒子施加切向力，使其围绕鼠标旋转。这些力通过修改粒子的速度向量来实现，配合影响范围和力度参数可以调节交互的强度。
🔧 相关工具