要让Canvas小球真实弹跳，需每帧按物理逻辑更新位置、速度、加速度，并精准处理边界与碰撞：重力g取正值（如0.3），触地时先校正y位置再以恢复系数衰减反向vy，两球碰撞需分离后沿连线更新速度分量，动画用requestAnimationFrame顺序执行更新、检测、绘制。
要让Canvas里的小球“像真的一样”弹跳碰撞，关键不在画得多漂亮，而在算得够准确——位置、速度、加速度每帧都要按物理逻辑更新，再配合及时的边界和物体间判断。
重力与下落加速怎么设
Canvas的y轴正向朝下，所以重力加速度必须取正值（比如g = 0.3），不能照搬物理课本的-9.8。每帧执行：
vy += g;
这样小球就会自然加速下坠。水平方向若不考虑空气阻力，vx保持不变即可。
地面和墙边反弹怎么处理
单纯反转速度会穿模或卡进边界，必须分两步做：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 先把小球“托回”安全位置：比如触地时设 y = canvas.height - radius，避免因浮点误差或高速穿透导致卡住
- 再更新速度：vy = -vy * restitution，其中 restitution 是恢复系数（推荐 0.7～0.9），不是固定负数
- 加个静止阈值：if (Math.abs(vy) < 0.1) vy = 0，防止低速时高频微抖
- 左右边界同理，用 x 与 radius、canvas.width 判断，修正位置并反转 vx
两个小球之间怎么碰撞
检测两球中心距离是否小于半径之和（即 dx² + dy² < (r₁ + r₂)²）：
立即学习“前端免费学习笔记（深入）”；
- 先分离：沿连线方向把它们轻轻推开，避免下一帧重复触发碰撞
- 再更新速度：若质量相等，可直接交换x/y方向的速度投影；更轻量做法是只反转相对速度在碰撞方向上的分量
- 别忘了加阻尼：每次碰撞后适当衰减总动能，否则会越弹越快
动画循环怎么组织才稳
必须用 requestAnimationFrame，不能用 setInterval：
- 每帧严格按顺序执行：更新所有速度 → 更新所有位置 → 检测并响应全部碰撞 → 清空画布 → 绘制全部小球
- 清空推荐 ctx.clearRect(0, 0, width, height)，背景复杂时再考虑优化方案
- 帧率波动会影响重力累积，简单项目可忽略；高精度需求建议引入 deltaTime 缩放，如 vy += g * deltaTime
