粒子效果生成器

免费在线粒子效果生成器。创建Canvas粒子动画,支持自定义粒子数量、大小、颜色、速度、连线效果。实时预览,一键复制HTML+CSS+JS代码。无需注册,零依赖。

零依赖·可离线使用

🎛️ 粒子参数

80
2
1
0.8

👁️ 实时预览

📋 生成代码

📖 关于粒子效果

粒子效果是通过大量小型图形元素在画布上运动形成的视觉效果。每个粒子拥有独立的位置、速度、大小和颜色属性,通过HTML5 Canvas API绘制和动画,广泛用于网页背景装饰、数据可视化和交互式艺术创作。

粒子效果的应用场景

性能优化建议

  1. 桌面端粒子数不超过200个,移动端不超过50个
  2. 使用requestAnimationFrame代替setInterval
  3. 连线检测用距离平方比较,避免开方运算
  4. 粒子超出画布时回绕,不创建新对象
  5. 使用空间分区(网格法)减少碰撞检测

❓ 常见问题

什么是粒子效果?

粒子效果是通过大量小型图形元素(粒子)在画布上运动形成的视觉效果。每个粒子有独立的位置、速度、大小和颜色属性,通过Canvas API绘制和动画,常用于网页背景、数据可视化和交互式艺术。

粒子连线效果是如何实现的?

连线效果通过计算每对粒子之间的距离,当距离小于设定阈值时,绘制一条半透明的线连接两个粒子。距离越近线条越不透明,距离越远越透明,形成网状视觉效果。这是O(n²)复杂度算法,粒子数量较多时需注意性能。

如何优化粒子动画性能?

性能优化建议:1) 控制粒子数量,桌面端建议不超过200个;2) 使用requestAnimationFrame而非setInterval;3) 连线检测时只计算距离平方,避免开方运算;4) 使用空间分区(网格法)减少碰撞检测次数;5) 粒子超出画布时回绕而非创建新对象。

可以将粒子效果用于商业项目吗?

可以。本工具生成的代码完全免费,无需署名即可用于个人和商业项目。代码不包含任何第三方库依赖,您可以自由修改和分发。

支持哪些粒子形状?

本工具支持圆形、方形和三角形粒子。圆形是最常用的粒子形状,性能最好;方形适合像素风格效果;三角形适合几何风格设计。您也可以在生成代码的基础上自定义其他形状。

已复制到剪贴板