Question

我想用HTML5画布不断更新我的图像位置。我尝试了以下javascript代码来完成工作

window.onload = function start() {
  update();
}

function update() {
  document.getElementById('scoreband').innerHTML = score;
  var style = document.getElementById('bug').style;
  timmer = window.setInterval(function () {
    style.left = ((Math.random() * 100) + 1) + "%";
    style.top = ((Math.random() * 100) + 19) + "%";
  }, num);
}

但是当谈到HTML5画布时，这不起作用。是否有类似的方法在HTML5画布中执行相同的工作？

Answer 1

要更改任何可视DOM内容，您应该使用requestAmimationFrame

例如

function update(time){
   // time is in ms and has a 1/1000000 second accuracy 
   // code that changes some content, like the canvas


   requestAnimationFrame(update);  // requests the next frame in 1/60th second
}

并开始

requestAnimationFrame(update);

根据要求

indow.onload = function start() {
  requestAnimationFrame(update);
}

function update() {
  document.getElementById('scoreband').innerHTML = score;
  var style = document.getElementById('bug').style;
  style.left = ((Math.random() * 100) + 1) + "%";
  style.top = ((Math.random() * 100) + 19) + "%";
  requestAnimationFrame(update);
}

Answer 2

虽然它不如requestAnimationFrame好，但setInterval的帧速率可以是动态的。

export const Login = withRouter(LoginWithoutRouter)

通过使用HTML5画布，如何创建具有时间间隔的无限循环

2 个答案: