HTML5 Canvas – Animation
Im letzten Teil habe ich euch gezeigt, wie ihr eine Zeichnung per JavaScript auf eurem Canvas erstellt. Diese Zeichnung könnt ihr nun als Bewegung auf eurem Canvas bewegen.
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.
Das könnte Dich auch interessieren
Laravel – The PHP Framework For Web Artisans
Laravel ist ein PHP Framework, dass den PHP Handwerker zum PHP Künstler machen möchte, so jedenfalls das Statement auf der offiziellen Website.
Projektreflexion – Vorausschauende Rückschau
Die Reflexion als Rückschau auf die Projektphase Auch in Zeiten von Agilität und stetigem Bauen -> Messen -> Lernen finden die meisten Projekte doch früher o...
Die Suche nach dem passenden Editor
In meinem bisherigen Studium habe ich mich schon öfters auf die Suche nach einem Editor für die Webentwicklung gemacht. In diesem Blogbeitrag möchte ich Euch...