Canvas 的绘制速度不一致requestAnimationFrame

编程问答 2022-05-24

问题描述

我有最简单直接的画布动画：

jsFiddle link

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.canvas.width  = 700;
ctx.canvas.height = 300;

var x = 0;

var update = function() {
  x = x + 6;
}

var draw = function() {
  ctx.clearRect(0,canvas.width,canvas.height);
  ctx.fillRect(x,10,30,30);
}

let lastRenderTime = 0
const frameRate = 60;

function main(currentTime) {
  window.requestAnimationFrame(main)
  const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000
  if (secondsSinceLastRender < 1 / frameRate) return


  lastRenderTime = currentTime

  update()
  draw()
}

window.requestAnimationFrame(main)

它只是一个从左向右移动的矩形。

但是，即使在我强大的 PC 上它的运行也不一致（你可以看到它对于 60 fps 来说不够流畅，而且速度也在变化）。

是我做错了什么还是画布就是这样工作的？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript