JavaScript粒子系统与物理模拟教程详解

一分耕耘，一分收获！既然打开了这篇文章《JavaScript粒子系统详解与物理模拟教程》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

粒子系统在JavaScript中是一种基于requestAnimationFrame和Canvas 2D/WebGL的手写循环编程模式，核心是初始化、更新状态、重绘三步，需控制数量、清空画布、使用deltaTime及边界重置。

粒子系统在 JavaScript 中本质是什么？

它不是浏览器内置 API，也不是某个标准库，而是一种基于 requestAnimationFrame + Canvas 2D（或 WebGL）持续更新并绘制大量小对象的编程模式。每个“粒子”通常只是带位置、速度、加速度、颜色、半径等属性的普通 JS 对象，系统本身由你手写的循环逻辑驱动。

用 Canvas 2D 实现基础粒子动画的关键步骤

避开框架（如 p5.js、three.js），从零写一个可运行的粒子效果，核心在于三件事：初始化粒子数组、每帧更新状态、每帧重绘。容易卡在「动不起来」或「越来越慢」——多数是因为没控制粒子数量或没清空画布。

• canvas.getContext('2d') 必须复用，不要每帧都调用
• 清空画布用 ctx.clearRect(0, 0, canvas.width, canvas.height)，别用 ctx.fill() 覆盖背景（会残留）
• 粒子位置更新需结合时间差（deltaTime），否则帧率波动会导致速度忽快忽慢
• 超出边界的粒子建议重置（如飞出右边界就回到左边界），避免无限累积计算

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const particles = Array.from({ length: 100 }, () => ({
  x: Math.random() * canvas.width,
  y: Math.random() * canvas.height,
  vx: (Math.random() - 0.5) * 2,
  vy: (Math.random() - 0.5) * 2,
  radius: Math.random() * 2 + 1
}));
<p>function update() {
particles.forEach(p => {
p.x += p.vx;
p.y += p.vy;
if (p.x > canvas.width) p.x = 0;
if (p.x < 0) p.x = canvas.width;
if (p.y > canvas.height) p.y = 0;
if (p.y < 0) p.y = canvas.height;
});
}</p><p>function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => {
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
ctx.fillStyle = <code>hsl(${p.x % 360}, 70%, 60%)</code>;
ctx.fill();
});
}</p><p>function loop(timestamp) {
update();
render();
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);</p>

加物理效果时最容易忽略的两个细节

想让粒子“像真实物体一样运动”，不是简单加个 vy += 0.1 就完事。重力、阻力、碰撞反馈这些看似简单的概念，在离散帧下极易失真。

• 加速度应乘以 deltaTime / 16（假设目标 60fps），否则在高刷屏或卡顿时会严重偏移
• 阻力（如空气摩擦）推荐用 vx *= 0.99 这类指数衰减，而不是每次减固定值——后者在低帧率下会让粒子“突然停住”
• 粒子间碰撞检测若用两两比较（O(n²)），200 个粒子就约 4 万次运算，CPU 瞬间吃满；实际项目中几乎都用空间分割（如四叉树）或直接放弃精确碰撞，改用场力（如鼠标吸引/排斥）

什么时候该换 WebGL 或用现成库？

当粒子数稳定超过 500，或需要逐像素光照、纹理、阴影时，Canvas 2D 会明显掉帧，且代码维护成本陡增。这时 WebGL（通过 THREE.Points 或自定义 shader）是更合理的选择。但注意：three.js 的 PointsMaterial 默认不支持单粒子独立旋转或复杂生命周期，得自己写 shader 才能突破限制。

如果只是做营销页里的飘雪、光点、烟花，用 pixi.js 或轻量库 particles.js 更省心；但它们的配置项藏得深，比如 particles.js 的 move.enable 关闭后粒子仍可能因重力下落——因为默认启用了 gravity，得一并设为 { enable: false }。

本篇关于《JavaScript粒子系统与物理模拟教程详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！