Bewegung mit konstanter Geschwindigkeit

<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="600" height="150"style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><input type="button" onclick="Rechteck.start()" value="Start"><script>'use strict';var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var dt=1;var dx;var repeater;var Rechteck={   x:0,   v:1,      zeichnen: function(x){      ctx.fillStyle = "#FF0000";      ctx.fillRect(this.x,100,50,50);      ctx.stroke();   },   bewegen: function(){         dx=this.v*dt;      this.x=this.x+dx;   },   start: function(){   this.x=0;   wiederholen();   }}
Rechteck.zeichnen();//Programm wird beim Aufruf der Datei gestartet
//Die Wiederholung kann sich innerhalb des Objekts nicht selbst aufrufenfunction wiederholen(){   ctx.clearRect(0, 0, canvas.width, canvas.height);   Rechteck.zeichnen();   Rechteck.bewegen();   repeater=window.requestAnimationFrame(wiederholen);   if (Rechteck.x>100) cancelAnimationFrame(repeater);}</script>
</body></html>

Zeitänderung