Slow for loop for Canvas animation

Question

I am trying to do something using the canvas, where I can go in an amount that will be to some extent 0-360, and the line will revive from wherever its current position does not correspond to the degree I have set.

Right now I have a line running to whatever degree (I have not yet performed part of the function where I passed in degrees ... just doing this in a for loop at the moment). So my main question is: how do I get the line to revive more slowly? If I just let the for loop work, it just goes to the endpoint. How can I slow it down so that it animates?

Code here: http://jsfiddle.net/WPTjv/2/

Thanks!

Edit: I don't really like the code, so if you have a better way to do this, I will gladly accept my suggestions.

Answer 1

You need to use something like setInterval to call a piece of code every N milliseconds. Syntax:

setInterval(code, milliseconds);

It returns the number that needs to be saved in order to stop the code. Therefore, we can write:

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

This creates a function that happens every 30 milliseconds.

Every 30 milliseconds, clock() is called, x incremented, and if x greater than 90, we call clearInterval and pass in the number returned by our setInterval call. This ensures that code is opened 90 times.

Here is a live example:

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

Answer 2

Here you go: http://jsfiddle.net/WPTjv/3/