# Boing：Canvas实时Verlet物理引擎实现弹力球互动
> 基于HTML5 Canvas的Verlet积分物理引擎，支持约束、碰撞检测与实时互动弹力球，提供核心参数配置与性能优化清单。
## 元数据
- 路径: /posts/2025/12/01/boing-real-time-canvas-physics/
- 发布时间: 2025-12-01T03:17:13+08:00
- 分类: [application-security](/categories/application-security/)
- 站点: https://blog.hotdry.top
## 正文
在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]
[1]: https://greg.technology
[2]: https://news.ycombinator.com/item?id=42000492
（正文约1050字）
## 同分类近期文章
### [Twenty CRM架构解析：实时同步、多租户隔离与GraphQL API设计](/posts/2026/01/10/twenty-crm-architecture-real-time-sync-graphql-multi-tenant/)
- 日期: 2026-01-10T19:47:04+08:00
- 分类: [application-security](/categories/application-security/)
- 摘要: 深入分析Twenty作为Salesforce开源替代品的实时数据同步架构、多租户隔离策略与GraphQL API设计，探讨现代CRM系统的工程实现。
### [基于Web Audio API的钢琴耳训游戏：实时频率分析与渐进式学习曲线设计](/posts/2026/01/10/piano-ear-training-web-audio-api-real-time-frequency-analysis/)
- 日期: 2026-01-10T18:47:48+08:00
- 分类: [application-security](/categories/application-security/)
- 摘要: 分析Lend Me Your Ears耳训游戏的Web Audio API实现架构，探讨实时音符检测算法、延迟优化与游戏化学习曲线设计。
### [JavaScript构建工具性能革命：Vite、Turbopack与SWC的架构演进](/posts/2026/01/10/javascript-build-tools-performance-revolution-vite-turbopack-swc/)
- 日期: 2026-01-10T16:17:13+08:00
- 分类: [application-security](/categories/application-security/)
- 摘要: 深入分析现代JavaScript工具链性能革命背后的工程架构：Vite的ESM原生模块、Turbopack的增量编译、SWC的Rust重写，以及它们如何重塑前端开发体验。
### [Markdown采用度量与生态系统增长分析：构建量化评估框架](/posts/2026/01/10/markdown-adoption-metrics-ecosystem-growth-analysis/)
- 日期: 2026-01-10T12:31:35+08:00
- 分类: [application-security](/categories/application-security/)
- 摘要: 基于GitHub平台数据与Web生态统计，构建Markdown采用率量化分析系统，追踪语法扩展、工具生态、开发者采纳曲线与标准化进程的工程化度量框架。
### [Tailwind CSS v4插件系统架构与工具链集成工程实践](/posts/2026/01/10/tailwind-css-v4-plugin-system-toolchain-integration/)
- 日期: 2026-01-10T12:07:47+08:00
- 分类: [application-security](/categories/application-security/)
- 摘要: 深入解析Tailwind CSS v4插件系统架构变革，从JavaScript运行时注册转向CSS编译时处理，探讨Oxide引擎的AST转换管道与生产环境性能调优策略。