Question

I’m trying to make something using canvas, where I can pass in a number, which would equal a certain degree 0-360, and a line would animate from where ever its current position is to the degree I set.

Right now I have the line going to whatever degree I want (I haven’t done the function part yet where I pass in the degree… just doing it in the for loop for now) So my main question is how do I get the line to animate slower? If I just let the for loop run it just goes right to the end point. How can I slow it down so it animates?

The code is here: http://jsfiddle.net/WPTjv/2/

Thanks!

Edit: I’m not particularly fond of the code, so if you have a better way to do it too I’m happy to take suggestions.

Answer 1

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

setInterval(code, milliseconds);

It returns a number that you need to save so you can stop the code. So we can write:

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

This creates a function that occurs every 30 milliseconds.

Every 30 milliseconds, clock() is called, x is incremented, and if x is more than 90 we call clearInterval and pass in the number that our call to setInterval returned. This makes sure that the code open happens 90 times total.

Here’s a live example:

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