JS: Animationen im HTML5 Canvas Objekt durch Framerate des Browsers anpassen

[Aruyan]

Hallo zusammen,

Ich experimentiere zur Zeit viel mit dem <canvas>-Objekt herum und habe nun eine kleine
Animation (konkrekt: ein Bild verschiebt sich linear von Punkt a nach Punkt b) erstellt.
Dies habe ich durch die setTimeout Methode realisiert, welche rekursiv die zu zeichnende Methode aufruft. Die Abbruchbedingung und damit das Ende der Animation ist dann wahr, wenn Punkt b erreicht wurde.

Soweit so gut.

Als ich die Animation in verschiedenen Browsern testete bemerkte ich eine Verschiedenheit der Animationsdauer. Im Firefox beispielsweise dauerte die Animation deutlich länger als in Chrome.

Ich bin mir sicher, dass dies mit der Framerate des jeweiligen Browsers zusammenhängt nur frag ich mich wie ich anhand der Framerate die Animation anpassen kann.

Oder gibt es gar ein einfaches Mittel eine Animation im Canvas Objekt mit Javascript für jeden Browser gleich schnell zu machen?

Viele Grüße,
Aruyan

 

[CPoly]

Hört sich so an, als hättest du es falsch implementiert. Also entweder nimmst du überall setIntervall mit fester Verzögerung, oder du implementierst es mit setTimeout korrekt. Das bedeutet, dass du die Zeit messen musst, welche das Zeichnen gebraucht hat, und entsprechend die Verzögerung zum nächsten Schritt dynamisch anpasst.
Oder eine weitere Möglichkeit wäre es, die Schrittweite des Verschiebens von der Zeit abhängig zu machen (nicht immer um eine feste Länge verschieben).