1. Image Data

ImageData beschreibt die Pixeldaten eines bestimmten Bereichs auf dem Canvas Element. Für was brauchen wir das jetzt? Auf unserem Canvas animieren wir später, indem wir unsere Figur mit jeder Bewegung neu zeichnen. Damit nun das vorherige Bild „gelöscht“ wird, erstellen wir, ein Bild (ImageData) von unserem Hintergrund. Und dies bevor die Figur überhaupt gezeichnet wird. Der Hintergrund ist statisch und wird mit jeder Bewegung der Figur neu erzeugt. Er legt sich also über das vorher gezeichnete Bild und erst dann wird das neue Bild der Figur gezeichnet. Und so geht das dann immer weiter. In JavaScript sieht das dann so aus: Wir legen eine Variable an, in der wir unseren Hintergrund speichern.

var imgData = crc2.getImageData(a, b, w, h);

Um nun unsere ImageData wieder über den Canvas zu legen, nutzen wir folgende Zeile.

crc2.putImageData(imgData, a, b);

2. Funktion mit Parametern

Im ersten Teil haben wir einen Kreis mit stroke() und fill() gezeichnet. Diesen Codeblock packen wir jetzt in eine Funktion mit Parametern. Der Grund warum wir das machen ist, weil wir unseren Kreis immer an anderen Stellen zeichnen lassen wollen. Wir erstellen sozusagen einzelne Frames. Die x- und y-Werte variieren, deshalb können wir dem Kreis keine festen Werte mehr geben. Dazu später mehr.

function drawCircle(_x, _y){
    crc2.beginPath();
    crc2.arc(_x, _y, 50, 0, Math.PI * 2);
    crc2.fillStyle = "#00ff00";
    crc2.fill();
    crc2.strokeStyle="hsl(" + Math.random() * 360 + ", 100%, 50%)";
    crc2.stroke();
    crc2.closePath();
}

3. Die Animation

Als erstes erstellen wir uns eine neue Funktion. Am Anfang unserer Funktion holen wir uns unsere ImageData, welche wir gespeichert haben. Wie dies funktioniert habt ihr oben erfahren. Dann legen wir zwei Variablen an, welche die Startwerte des Kreises enthalten (diese müssen global gelten).

var x = 400;
var y = 300;

Auf diese beiden Werte addieren wir mit jedem Frame neue Werte auf, sodass sich unser Kreis bewegt (hier wird nur der x-Wert erhöht durch dx).

x += dx;

Nun können wir noch sagen, wenn der Kreis das Ende unseres Canvas erreicht hat, soll der x-Wert wieder zurückgesetzt werden.

if(x > 850){
    x = -50;
}

Erst danach lassen wir unseren Kreis zeichnen.

drawCircle(x, y);

Zum Schluss rufen wir die Funktion, in der wir uns gerade befinden, rekursiv auf. Dieser Punkt ist auch der wichtigste. Mit der setTimeout-Methode wird die Funktion alle 30ms neu aufgerufen. Das erzeugt eine Bildrate von etwas mehr als 30 fps (frames per second), was als flüssig laufendes Bild wahrgenommen wird.

window.setTimeout(animate, 30);

Zu guter Letzt müssen wir unsere animate-Funktion natürlich noch irgendwo aufrufen wo sie dann auch ausgeführt wird. Hier findet ihr den gesamten Code mit ein paar kleinen Extras. Versucht selbst einmal ein paar Figuren zu zeichnen und zu bewegen. Schaut auch mal was passiert, wenn ihr eure ImageData komplett weg lasst. Mit etwas Zeit kann man mit dieser Methode auch Spiele wie z.B. Pong programmieren.