Замедлить цикл, чтобы оживить холст

Question

Я пытаюсь сделать что-то, используя canvas, где я могу передать число, которое будет равно определенной степени 0-360, и линия будет анимироваться от того места, где когда-либо находится ее текущая позиция, до степени, которую я установил.

Прямо сейчас у меня есть строка, идущая в той степени, в которой я хочу (я еще не выполнил функциональную часть, где я прохожу степень, просто пока делаю это в цикле for). Поэтому мой главный вопрос - как получить анимацию медленнее? Если я просто позволю циклу for работать, он просто перейдет прямо к конечной точке. Как я могу замедлить его, чтобы он оживил?

Код здесь: http://jsfiddle.net/WPTjv/2/

Спасибо!

Редактировать: код мне не особо нравится, поэтому, если у вас есть лучший способ сделать это, я с удовольствием приму предложения.

Answer 1

Вам нужно использовать что-то вроде setInterval для вызова фрагмента кода каждые N миллисекунд. Синтаксис:

setInterval(code, milliseconds);

Возвращает число, которое необходимо сохранить, чтобы вы могли остановить код. Таким образом, мы можем написать:

 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/

Answer 2

Вот, пожалуйста, http://jsfiddle.net/WPTjv/3/