Langsamer machen for-Schleife, um Canvas zu animieren

Question

Ich versuche etwas mit Canvas zu machen, wo ich eine Zahl übergeben kann, die einem bestimmten Grad 0-360 entspricht, und eine Linie würde von ihrer aktuellen Position aus zum Grad, den ich setze, animieren.

Derzeit habe ich die Linie zu jedem Grad gehen, den ich möchte (Ich habe den Teil noch nicht gemacht, wo ich den Grad übergebe... mache es jetzt nur in der for-Schleife). Meine Hauptfrage ist also, wie kann ich die Linie langsamer animieren lassen? Wenn ich die for-Schleife einfach laufen lasse, geht sie direkt zum Endpunkt. Wie kann ich sie verlangsamen, damit sie animiert?

Der Code ist hier: http://jsfiddle.net/WPTjv/2/

Danke!

Bearbeiten: Ich bin nicht besonders begeistert vom Code, also wenn Sie einen besseren Weg haben, es zu tun, bin ich gerne offen für Vorschläge.

Answer 1

Du musst etwas wie setInterval verwenden, um einen Code alle N Millisekunden aufzurufen. Die Syntax lautet:

setInterval(code, Millisekunden);

Es gibt eine Nummer zurück, die du speichern musst, um den Code zu stoppen. Also können wir schreiben:

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

Dies erstellt eine Funktion, die alle 30 Millisekunden auftritt.

Jede 30 Millisekunden wird clock() aufgerufen, x wird erhöht, und wenn x größer als 90 ist, rufen wir clearInterval auf und übergeben die Nummer, die unser Aufruf von setInterval zurückgegeben hat. Dadurch wird sichergestellt, dass der Code insgesamt 90 Mal ausgeführt wird.

Hier ist ein Live-Beispiel:

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

Answer 2

Hier ist es: http://jsfiddle.net/WPTjv/3/