Ein Grundgerüst für eine Canvas-Animation

Mit Canvas kann man nicht nur statische Grafiken erstellen. Es ist auch möglich, eine Canvas-Grafik kontinuierlich zu verändern. Man spricht dann in der Regel von einer Animation. Solche Animationen werden in der Regel über einen rekursiven Funktionsaufruf erzeugt, d.h. eine Funktion die sich selbst aufruft.

Dieses Code-Beispiel verdeutlicht den Ablauf einer Animation. Im Beispiel wird ein Rechteck kontinuierlich über einen gefüllten Hintergrund bewegt. Die rekursive Funktion in diesem Beispiel ist animate(context, breite, hoehe, ax, ay, adx, ady).

<script type="text/javascript">
// Die Canvas-Funktion beim Laden der Seite aufrufen
if(window.addEventListener){
	addEventListener("load", zeichne, false);
	}
//Canvas zeichnen
function zeichne(){
	var myCanvas = document.getElementsByTagName('canvas')[0];
	if(myCanvas.getContext){
		var context = myCanvas.getContext('2d');
		//Stil fuer die Füllung festlegen
		context.fillStyle = "rgb(255, 0, 255)";
		//Gesamte Canvasflaeche fuellen
		context.fillRect(0, 0, myCanvas.width, myCanvas.height);
		//Erstaufruf der Animation mit Startparamtern aufrufen
		animate(context, myCanvas.width, myCanvas.height, 31, 69, 1, -1);
	}
}

//Animieren im Canvas mit BreitexHoehe, Position x,y, Schrittweite x,y
function animate(context, breite, hoehe, ax, ay, adx, ady){
	setTimeout(function(){
		//Bewegen und Abprallen des Quadrates
		if(ax == breite-50){
			adx = -1;
		}
		else{
		if(ax == 0){
			adx = 1;
		}
	}
		if(ay == hoehe-50){
			ady = -1;
		}
		else{
		if(ay == 0){
			ady = 1;
		}
	}
	ax = ax+adx;
	ay = ay+ady;
	// Alles löschen
	context.clearRect(0, 0, breite, hoehe);
	context.fillStyle = "rgb(255, 0, 255)";
	context.fillRect(0, 0, breite, hoehe);
	context.fillStyle = "rgba(0, 0, 255, 0.5)";
	context.fillRect(ax, ay, 50, 50);
	// rekursiver Aufruf der Funktion
	self.animate(context, breite, hoehe, ax, ay, adx, ady);
	}, 20);//Geschwindigkeit 0-schnell,100 sehr langsam
}
</script>

Beispiel ansehen