在Web开发中，实现实时2D物理模拟是提升互动体验的关键技术，而Verlet积分法因其稳定性和简单性，成为Canvas物理引擎的首选方案。这种方法无需显式存储速度，通过前后位置差值近似速度，避免了传统Euler积分的能量漂移问题，特别适合浏览器环境下的高帧率渲染。
Verlet积分的核心在于位置更新公式：new_pos = 2 * current_pos - old_pos + acceleration * dt^2，其中old_pos记录上一步位置，acceleration包括重力、阻力等。该公式确保模拟长期稳定，例如在模拟弹力球时，重力g = [0, 0.2]像素/帧²，能自然产生下落弧线。约束系统进一步强化刚性：距离约束通过迭代拉伸/压缩粒子间距离至初始值rest_length，刚度stiffness=0.95控制响应速度，避免振荡。碰撞检测采用简单圆-圆与圆-墙算法：对于两球，若dist < r1 + r2，则沿法线交换相对速度乘以restitution=0.8（反弹系数）。
实际落地时，构建一个Boing式互动弹力球引擎需以下参数清单：
- 时间步长(dt)：固定
1/60 ≈ 0.0167s，结合requestAnimationFrame同步更新，确保60FPS。
- 粒子属性：质量
mass=1，半径r=10-20px，初始位置随机散布，速度vx,vy ∈ [-2,2]。
- 力场参数：重力
[0, 0.15-0.3]，空气阻力drag=0.99（速度 *= drag），鼠标约束：吸引距离内粒子向光标移动，强度k=0.01。
- 约束迭代：每帧10-20次迭代，公式
correction = (current_dist - rest_length) / current_dist * stiffness，沿连接向量应用pos1 -= correction * (pos2 - pos1)。
- 碰撞响应：墙壁反弹
vy *= -restitution if y > height - r，球间：计算相对速度v_rel = v1 - v2，投影法线n = (pos2 - pos1).normalize()，冲量impulse = 2 * v_rel.dot(n) / (1/m1 + 1/m2) * restitution，更新速度。
为优化性能，限制粒子数<500，避免O(n²)碰撞全扫描：采用空间哈希格子（cell_size=50px），仅检查邻格碰撞。绘制层级：先清屏ctx.clearRect(0,0,w,h)，后画轨迹ctx.stroke()，最后球体ctx.fillStyle='hsl('+hue+',100%,50%)'; ctx.arc()渐变阴影提升视觉。边界处理：虚拟墙约束或反射。
潜在风险包括过迭代导致滞后（上限20次），或dt不稳引起抖动（substepping：多步小dt）。回滚策略：fallback Euler仅碰撞帧，监控FPS<30降级粒子数。扩展方向：角度约束建绳索/布料，WebGPU加速碰撞。
该实现源于greg.technology作品集中的互动demo，结合Verlet JS库原理。1 HN讨论强调其在2D游戏的适用性。2
（正文约1050字）