免费在线粒子效果生成器。创建Canvas粒子动画，支持自定义粒子数量、大小、颜色、速度、连线效果。实时预览，一键复制HTML+CSS+JS代码。无需注册，零依赖。
零依赖·可离线使用🎛️ 粒子参数
80
2
1
0.8
👁️ 实时预览
📋 生成代码
📖 关于粒子效果
粒子效果是通过大量小型图形元素在画布上运动形成的视觉效果。每个粒子拥有独立的位置、速度、大小和颜色属性，通过HTML5 Canvas API绘制和动画，广泛用于网页背景装饰、数据可视化和交互式艺术创作。
粒子效果的应用场景
- 网页背景：为页面增添动感和科技感
- 数据可视化：展示数据流动和关联关系
- 交互设计：鼠标跟随、点击反馈
- 游戏开发：爆炸、烟雾、火焰效果
- 品牌展示：科技感、未来感的视觉呈现
性能优化建议
- 桌面端粒子数不超过200个，移动端不超过50个
- 使用requestAnimationFrame代替setInterval
- 连线检测用距离平方比较，避免开方运算
- 粒子超出画布时回绕，不创建新对象
- 使用空间分区（网格法）减少碰撞检测
❓ 常见问题
什么是粒子效果？
粒子效果是通过大量小型图形元素（粒子）在画布上运动形成的视觉效果。每个粒子有独立的位置、速度、大小和颜色属性，通过Canvas API绘制和动画，常用于网页背景、数据可视化和交互式艺术。
粒子连线效果是如何实现的？
连线效果通过计算每对粒子之间的距离，当距离小于设定阈值时，绘制一条半透明的线连接两个粒子。距离越近线条越不透明，距离越远越透明，形成网状视觉效果。这是O(n²)复杂度算法，粒子数量较多时需注意性能。
如何优化粒子动画性能？
性能优化建议：1) 控制粒子数量，桌面端建议不超过200个；2) 使用requestAnimationFrame而非setInterval；3) 连线检测时只计算距离平方，避免开方运算；4) 使用空间分区（网格法）减少碰撞检测次数；5) 粒子超出画布时回绕而非创建新对象。
可以将粒子效果用于商业项目吗？
可以。本工具生成的代码完全免费，无需署名即可用于个人和商业项目。代码不包含任何第三方库依赖，您可以自由修改和分发。
支持哪些粒子形状？
本工具支持圆形、方形和三角形粒子。圆形是最常用的粒子形状，性能最好；方形适合像素风格效果；三角形适合几何风格设计。您也可以在生成代码的基础上自定义其他形状。