javascript - 放慢 for 循环以动画 Canvas

Question

我正在尝试使用 canvas 制作一些东西，我可以在其中传递一个数字，该数字等于某个度数 0-360，并且一条线将从其当前位置到我设置的度数的任何位置进行动画处理。

现在，我的路线可以达到我想要的任何程度(我还没有完成我通过学位的功能部分......现在只是在 for 循环中完成)所以我的主要问题是如何我怎样才能使动画速度变慢？如果我只是让 for 循环运行，它就会一直运行到终点。我怎样才能减慢它的速度以使其具有动画效果？

代码在这里:http://jsfiddle.net/WPTjv/2/

谢谢!

编辑:我不是特别喜欢代码，所以如果您也有更好的方法，我很乐意接受建议。

Answer 1

你需要使用setInterval之类的东西每隔N毫秒调用一段代码。语法是:

setInterval(code, 毫秒);

它返回一个数字，您需要保存该数字才能停止代码。所以我们可以这样写:

 var interval = setInterval(function() {
     clock();
     x++;
     if (x > 90) clearInterval(interval);
 }, 30);

这将创建一个每 30 毫秒执行一次的函数。

每 30 毫秒，clock() 被调用，x 递增，如果 x 大于 90，我们调用 clearInterval 并传入我们对 setInterval 的调用返回的数字。这确保代码打开总共发生 90 次。

这是一个活生生的例子:

http://jsfiddle.net/WPTjv/10/