html粒子龙卷风代码

 人参与 | 时间：2026-10-17 07:37:52
# HTML粒子龙卷风代码 一个canvas标签，粒龙几百个粒子，卷风加上旋转矩阵和向心力公式，代码浏览器里就能刮起龙卷风。粒龙这不是卷风特效软件做的，是代码纯JavaScript。 先看核心逻辑。粒龙粒子系统说白了就是卷风一堆点，每个点有自己的代码位置、速度、粒龙生命周期。卷风龙卷风的代码视觉效果靠三件事叠加：粒子围绕中心轴旋转、越往上半径越大、粒龙整体有向上的卷风速度分量。听起来复杂，代码代码写起来其实很短。 ```html ``` 代码不复杂，但有几个地方值得说。 `heightRatio` 是整个效果的关键变量。它让粒子的旋转半径随高度变化——底部收窄，顶部散开。没有这个，粒子就是个圆柱体，看着像水管漏了。我试过把系数从2.5调到1.0，龙卷风立刻变成矮胖的烟囱，完全不对味。 `p.angle += p.speed * (1 + heightRatio)` 这行也有讲究。高处粒子转得更快，模拟角动量守恒的视觉效果。真实的龙卷风确实如此，近地面摩擦大转速慢，上层气流畅通转得猛。 粒子重生那段用 `Object.assign(p, spawn())` 而不是创建新对象，是为了减少GC压力。600个粒子每帧都在死亡和重生，如果不停new对象，浏览器内存回收会拖帧率。 背景用 `rgba(10,10,18,0.15)` 半透明覆盖而不是完全清空，这样粒子会留下短促的拖尾。透明度0.15是个手感值——太高了拖尾太长像鬼片，太低了没有运动模糊感。 颜色用的 `hsla` 动态色相，180到240之间浮动，青蓝到深蓝。有人喜欢加紫色或者橙色，看个人审美。我偏向冷色调，更像雷暴天气里那种带电的云柱。 性能方面，600个粒子在普通笔记本上跑满60帧没问题。想更浓密可以加到1500，但得把 `arc` 换成 `fillRect`，圆形的绘制开销比矩形大不少。牺牲一点圆润度换粒子数量，视觉上反而更狂暴。 调参的乐趣在于，`vy` 改小到0.5，龙卷风变成缓慢升腾的烟雾；`speed` 改大到0.1，整个柱子疯狂旋转像要散架。这些数字没有标准答案，全凭你想要什么感觉。 最后提一句：这代码放到手机上也能跑，但 `innerWidth` 在移动端有缩放问题，加个 `viewport` meta标签就行。别忘了。 顶: 38踩: 7775