免费在线粒子效果生成器。创建Canvas粒子动画,支持自定义粒子数量、大小、颜色、速度、连线效果。实时预览,一键复制HTML+CSS+JS代码。无需注册,零依赖。
零依赖·可离线使用粒子效果是通过大量小型图形元素在画布上运动形成的视觉效果。每个粒子拥有独立的位置、速度、大小和颜色属性,通过HTML5 Canvas API绘制和动画,广泛用于网页背景装饰、数据可视化和交互式艺术创作。
粒子效果是通过大量小型图形元素(粒子)在画布上运动形成的视觉效果。每个粒子有独立的位置、速度、大小和颜色属性,通过Canvas API绘制和动画,常用于网页背景、数据可视化和交互式艺术。
连线效果通过计算每对粒子之间的距离,当距离小于设定阈值时,绘制一条半透明的线连接两个粒子。距离越近线条越不透明,距离越远越透明,形成网状视觉效果。这是O(n²)复杂度算法,粒子数量较多时需注意性能。
性能优化建议:1) 控制粒子数量,桌面端建议不超过200个;2) 使用requestAnimationFrame而非setInterval;3) 连线检测时只计算距离平方,避免开方运算;4) 使用空间分区(网格法)减少碰撞检测次数;5) 粒子超出画布时回绕而非创建新对象。
可以。本工具生成的代码完全免费,无需署名即可用于个人和商业项目。代码不包含任何第三方库依赖,您可以自由修改和分发。
本工具支持圆形、方形和三角形粒子。圆形是最常用的粒子形状,性能最好;方形适合像素风格效果;三角形适合几何风格设计。您也可以在生成代码的基础上自定义其他形状。