Javascript 在画布中移动圆圈

我想向右移动圆圈300px，然后停止它。我不知道我怎样才能做到。当我在寻找一些教程时，我总是看到无尽的循环。在文档中我读到了关于时间间隔的内容，但我认为这不是解决这个问题的好主意。我想让它看起来很漂亮，所以我想让它每1px移动一次并清除它。我想让它慢慢跑

这是我的密码：

var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var c=canvas.getContext（'2d'）；
c、 beginPath（）；
c、 弧（100300100,0,2*Math.PI，false）；
c、 笔划（）；
对于（变量i=0；i<300；i++）{
控制台日志（“dasd”）；
c、 beginPath（）；
//c.clearRect（0，0，window.innerWidth，window.innerHeight）；
c、 弧（100+i，300，100，0，2*Math.PI，false）；
c、 笔划（）；
}

画布{
边框：1px纯黑；
}
身体{
保证金：0；
}

您应该使用-您可以阅读更多关于

var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var c=canvas.getContext（'2d'）；
var start=null；
功能步骤（时间戳）{
如果（！start）start=时间戳；
var progress=时间戳-开始；
c、 beginPath（）；
c、 clearRect（0，0，window.innerWidth，window.innerHeight）；
c、 弧（100+进度，100，100，0，2*Math.PI，false）；
c、 笔划（）；
如果（进度<300）{
window.requestAnimationFrame（步骤）；
}
}
window.requestAnimationFrame（步骤）
画布{
边框：1px纯黑；
}
身体{
保证金：0；
}
@lexith如果你链接到英文文档可能会更好！哎呀！调整在没有“时间间隔”的情况下，您无法以平滑的动画方式移动它-否则，一次移动一个像素的功能将运行得太快，以至于您无法看到动画@Jamiec提供了正确的方法：“requestAnimationFrame”是完美的解决方案。