javascript - Canvas - 使 Canvas 中的圆在特定时间向下移动

Question

我想创建一个圆 ctx.arc(10, 10, 15, 0, Math.PI*2, true); 并因此使其向下流动而不会丢失其痕迹..您可以在下图中清楚地看到这一点 -

这里我们可以在黑暗的一面看到......圆圈实际上随着时间的流逝而移动..我想通过输入时间来控制速度......就像从上到下它应该在 2 秒内到达(或其他一些控制其流速的方法)

编辑:对不起，一些 friend 的问题是:什么是最有效和“非内存占用”的方法，(我知道有这种循环方法，但它非常占用内存的方法)

Answer 1

Javascript 知道 setTimeout(fn, ms)，它将在给定的毫秒数后调用给定的函数。但是，浏览器将需要一些时间来呈现您的绘图，并且当您希望 2 秒准确时，您将不得不注意您的帧/秒速率。

还有一个新的 specification draft称为 requestAnimationFrame，参见 http://paulirish.com/2011/requestanimationframe-for-smart-animating/为此。