javascript - 在 Canvas 中移动圆圈

Question

我想将圆圈向右移动 300px 然后停止。我不知道我该怎么做。当我在寻找一些教程时，我总是看到无限循环。在文档中我阅读了有关时间间隔的信息，但我认为这不是这个问题的好主意。我想让它看起来很漂亮，所以我想让它每移动 1px 并清除它。我想让它慢慢运行。

这是我的代码:

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');
c.beginPath();
c.arc(100, 300, 100, 0, 2 * Math.PI, false);
c.stroke();

for (var i = 0; i < 300; i++) {
  console.log("dasd");
  c.beginPath();
  // c.clearRect(0, 0, window.innerWidth, window.innerHeight);
  c.arc(100 + i, 300, 100, 0, 2 * Math.PI, false);
  c.stroke();
}

canvas {
  border: 1px solid black;
}

body {
  margin: 0;
}

<canvas></canvas>

Answer 1

你应该使用 requestAnimationFrame - 你可以阅读更多关于 canvas animation 的信息

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');

var start = null;
function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  c.beginPath();
   c.clearRect(0, 0, window.innerWidth, window.innerHeight);
  c.arc(100 + progress, 100, 100, 0, 2 * Math.PI, false);
  c.stroke();
  if (progress < 300) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

canvas {
  border: 1px solid black;
}

body {
  margin: 0;
}

<canvas></canvas>