<!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>