Canvas重力模拟异常求助：物体无法下落仅悬浮

你的代码存在几个关键问题，导致物体无法正常下落：

1. 初始速度失效且未更新
   初始height为0，代入v = Math.sqrt((2 * height) / gravity)得到的速度是0，后续也没有对速度做任何增量更新，所以height一直累加0，物体完全不动。

2. 动画循环中断
   return v;语句在requestAnimationFrame(update);之前，函数执行到return就直接终止，导致动画只运行一次，无法持续更新画面。

3. 未适配帧率差异
   直接使用现实中的重力值9.8m/s²，没有结合动画帧的时间间隔，会导致不同设备上动画速度不一致，也不符合现实中速度随时间持续加速的逻辑。

修复后的代码如下：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
var gravity = 9.8; // 9.8m/s²
var positionY = 0; // 用positionY更清晰表示垂直位置
var velocityY = 0;
var lastTime = 0;

function update(currentTime) {
  // 计算时间增量（转换为秒单位）
  const deltaTime = (currentTime - lastTime) / 1000;
  lastTime = currentTime;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(0, positionY, 10, 10);

  // 重力加速度更新速度
  velocityY += gravity * deltaTime;
  // 用速度更新垂直位置
  positionY += velocityY;

  // 可选：画布底部碰撞反弹，模拟现实碰撞效果
  if (positionY + 10 > canvas.height) {
    positionY = canvas.height - 10;
    velocityY *= -0.8; // 反弹并损失部分动能
  }

  requestAnimationFrame(update);
}

requestAnimationFrame(update);

<canvas id="myCanvas" width="300" height="300"></canvas>

核心修复说明：

• 初始化速度为0，通过velocityY += gravity * deltaTime实现速度随时间持续增加，还原重力加速效果
• 移除无用的return语句，确保requestAnimationFrame能持续调用，维持动画循环
• 引入deltaTime时间增量，保证不同帧率设备上的动画速度一致
• 增加可选的边界碰撞逻辑，让下落效果更贴近现实物理规律

内容的提问来源于stack exchange，提问作者catthatmeows_