canvas 使用requestAnimationFrame 如何获取时间差

在使用 `requestAnimationFrame` 来循环更新画布时，你可以利用 `requestAnimationFrame` 的回调函数中传入的时间戳参数来计算时间差。这个时间戳参数表示了当前帧开始渲染时的时间。

下面是一个示例代码：

let startTime; // 保存开始时间
let previousTime; // 上一帧的时间

function updateCanvas(timestamp) {
  if (!startTime) {
    startTime = timestamp; // 初始化开始时间
  }

  if (!previousTime) {
    previousTime = timestamp; // 初始化上一帧的时间
  }

  const deltaTime = timestamp - previousTime; // 计算时间差
  previousTime = timestamp; // 更新上一帧的时间

  // 在这里根据时间差来更新画布

  requestAnimationFrame(updateCanvas); // 循环调用
}

// 启动循环
requestAnimationFrame(updateCanvas);

在每一帧的回调函数中，你可以通过计算 `timestamp - previousTime` 来获取时间差 `deltaTime`，然后可以根据这个时间差来进行相应的画布更新操作。注意，在第一帧和初始化时，上一帧的时间 `previousTime` 和开始时间 `startTime` 需要进行初始化。之后，将 `timestamp` 赋值给 `previousTime`，以便在下一帧中计算时间差。

这样，你就可以使用 `requestAnimationFrame` 并获取时间差来实现画布的动态更新。