So erstellen Sie Animation mit dem HTML5-Canvas-Tag

Obwohl die HTML5 Segeltuch

Tag könnte kein Flash als Mechanismus ersetzen für Spiele und Animationen im Browser der Umsetzung ist es relativ einfach, Animation ein hinzufügen Segeltuch Image. Der Schlüssel ist die Animationsfunktionen bereits in den Browser integriert zu verwenden.

Die Grundstruktur der Animationsschleife in HTML5-Canvas

Eine Animation erfordert in der Regel eine spezielle Organisation so genanntes Animationsschleife. Die Grundstruktur der Animationsschleife funktioniert in jeder Sprache:

  1. Initialisierung.

    Erstellen Sie die Vermögenswerte, einschließlich Hintergrund und einem der Objekte, die Sie verwenden werden. Objekte, die in Echtzeit manipuliert werden normalerweise aufgerufen Sprites. Im Allgemeinen wird dies getan, wenn das Programm zum ersten Mal ausgeführt wird, die Zeit während der Hauptausführung zu speichern. Sie können auch Konstanten für die Bildgröße, Bildgröße, Bildrate, und die anderen Werte, die während der Ausführung des Spiels wird sich nicht ändern.

  2. Bestimmen Sie eine Bildrate.

    Animationen und Spielen zu arbeiten, indem eine Funktion wiederholt mit einer vorgeschriebenen Geschwindigkeit aufrufen. In javascript verwenden Sie in der Regel die setInterval () Funktion, um eine wiederholte Funktion zu spezifizieren. Das Framerate zeigt an, wie oft die angegebene Funktion aufgerufen werden. Spiele und Animationen typischerweise bei Bildraten zwischen 10 und 30 Bildern pro Sekunde laufen. Eine schnellere Bildrate ist glatter, aber möglicherweise nicht mit einigen Hardware wartbar sein.

  3. Beurteilen Sie den aktuellen Zustand.

    Jedes Sprite ist wirklich ein Datenelement. Bei jedem Rahmen, festzustellen, ob etwas Wichtiges passiert: Hat der Benutzer eine Taste drücken? Ist ein Element soll sich zu bewegen? Hat ein Sprite den Bildschirm zu verlassen? Haben zwei Sprites ineinander Geist aufgeben?

  4. Ändern Sie Sprite-Daten.

    Jedes Sprite Allgemeinen hat Positions- oder Rotationsdaten, die während jedes Rahmens geändert werden kann. Üblicherweise wird dies durch Transformationen durchgeführt (Translation, Rotation und Skalierung), obwohl man manchmal zwischen den Bildern stattdessen wechseln.

  5. Löschen Sie den Hintergrund.

    Eine Animation ist wirklich eine Reihe von Bildern schnell an der gleichen Stelle gezogen. Normalerweise müssen Sie den Hintergrund zu Beginn jedes Rahmens zu löschen den letzten Frame des Bildes zu löschen.

  6. Redraw alle Sprites.

    Jedes Sprite seine neuen Daten neu gezeichnet werden. Die Sprites zu bewegen scheinen, weil sie in einer neuen Position oder Orientierung gezeichnet sind.

Erstellen der Konstanten einer Animation-Funktion in HTML5-Canvas

Der Aufbau eines Programms, das ein Bild innerhalb einer Leinwand dreht erfordert mehrere Chargen von Code. Die erste Aufgabe ist es, die verschiedenen Variablen und Konstanten einzurichten, die das Problem beschreiben. Der folgende Code wird außerhalb jeglicher Funktionen erstellt werden, da es Werte beschreibt, die aus den Funktionen gemeinsam genutzt werden:

 var Zeichnung-var con-var goofyPic-var Winkel = 0-CANV_HEIGHT = 200-CANV_WIDTH = 200-SPR_HEIGHT = 50-SPR_WIDTH = 40-

Das Zeichnung Variablen auf die Segeltuch Element. Das con Variable wird die Zeichnung Kontext sein, goofyPic ist das Bild gedreht werden soll, und Winkel wird verwendet, um zu bestimmen, wie sehr das Bild gedreht wird gegenwärtig. Die anderen Werte sind Konstanten verwendet, um die Höhe und die Breite der Leinwand, als auch das Sprite zu beschreiben.

Bereitstellen der Animation in HTML5-Canvas

Verwenden Sie die body onload Mechanismus zu beginnen, einige Code auf, sobald die Seite geladen wurde. Jedoch hat die Seite nun zwei Funktionen. Das drin() Funktion behandelt Initialisierung und die zeichnen() Funktion wird wiederholt, um die eigentliche Animation zu handhaben aufgerufen werden. Hier ist der Code in der drin() Funktion:

 function init () {Zeichnung = document.getElementById ( "Zeichnung") - con = drawing.getContext ( "2D") - goofyPic = document.getElementById ( "goofyPic") - setInterval (Remis, 100) -} // end init

Die Aufgabe des drin() Funktion ist, die Dinge zu initialisieren. In diesem speziellen Beispiel verschiedene Elemente (die Leinwand, der Kontext, und das Bild) in javascript-Variablen geladen, und die Animation ist eingerichtet. Das setInterval () Funktion wird verwendet, um die Hauptanimationsschleife einzurichten. Sie hat zwei Parameter:

  • Eine wiederholbare Funktion: Der erste Parameter ist der Name einer Funktion, die immer wieder genannt werden. In diesem Fall ist die zeichnen Funktion wird oft aufgerufen werden.

  • Ein Verzögerungswert: Der zweite Parameter anzeigt, wie oft die Funktion in Millisekunden aufgerufen werden (1/1000 Sekunde). Eine Verzögerung von 100 wird eine Bildrate von 10 Bildern pro Sekunde erzeugen. Eine Verzögerung von 50 wird eine Bildrate von 20 Bildern pro Sekunde führen, und so weiter.

Geben Animation auf den aktuellen Frame im HTML5-Canvas

Das zeichnen() Funktion wird viele Male hintereinander aufgerufen werden. In der Regel ist ihre Aufgabe, den Rahmen zu löschen, berechnen neue Sprite-Staaten und das Sprite neu zu zeichnen. Hier ist der Code:

 Funktion draw () {// klar backgroundcon.fillStyle = "white" -con.fillRect (0, 0, CANV_HEIGHT, CANV_WIDTH) - // bordercon.strokeStyle = "red" -con.lineWidth = "5" -con ziehen. strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT) - // die Drehung ändern angleangle + = 0,25-if (Winkel> Math.PI * 2) {Winkel = 0 -} // eine neue Transformation systemcon.save start () - con.translate (100, 100) -con.rotate (Winkel) - // die imagecon.drawImage zeichnen (goofyPic, SPR_WIDTH / -2, SPR_HEIGHT / -2, SPR_WIDTH, SPR_HEIGHT) -con.restore () -} // Ende Unentschieden

Während der Code ein wenig beteiligt zu sein scheint, ist es nicht wirklich neu alles tun:

  1. Löschen Sie den Hintergrund.

    Denken Sie daran, dass Animationszeichnung wiederholt. Wenn Sie nicht über den Hintergrund am Anfang jedes Rahmens zu löschen, müssen Sie die vorherigen Rahmen Zeichnungen zu sehen. Verwenden Sie den Kontext des clearRect () Funktion einen neuen Hintergrund zu zeichnen, oder eine der anderen Zeichenwerkzeugen eine komplexere Hintergrundbild zu verwenden.

  2. Zeichnen Sie ein beliebiges nonsprite Inhalt.

    Zum Beispiel können Sie verwenden stroke, Linienbreite, und strokeRect () einen roten rechteckigen Rahmen um die Leinwand zu bauen. Beachten Sie, dass die CANV_HEIGHT und CANV_WIDTH Konstanten beziehen sich auf die aktuelle Leinwandgröße.

  3. Ändern Sie die Sprite-Zustand.

    Um den Drehwinkel des Bildes in dem Beispiel zu modifizieren, die Variable mit dem Namen Winkel wurde außerhalb der Funktion erstellt. (Es ist wichtig, dass Winkel wurde außerhalb der Funktion Kontext geschaffen, so kann sie ihren Wert zwischen den Aufrufen der Funktion beibehalten.) Sie können dann eine kleine Menge in den Winkel jeden Rahmen.

    Jedes Mal, wenn Sie eine Variable ändern (vor allem in einer nahezu endlosen Schleife wie eine Animation), sollten Sie sich für Randbedingungen überprüfen. Der größte zulässige Winkelwert (in Radiant) ist zwei mal pi. Wenn der Winkel größer als derjenige wird, setzt sie auf Null.

  4. Erstellen Sie eine Transformation. Legen Sie eine neue Transformation mit der oben sparen() Methode und verwenden Sie die drehen() und Übersetzen() Funktionen ein temporäres Koordinatensystem zu transformieren.

    Viele Animationen sind wirklich Modifikationen einer Transformation. Das Bild ändert sich nicht, nur die Transformation, die das Bild enthält.

  5. Zeichnen Sie das Bild in der Mitte der neuen Transformation.

    Das drawImage () Befehl zeichnet das Bild auf der Basis der oberen linken Ecke eines Bildes. Wenn Sie das Bild bei (0, 0) der neuen Transformation ziehen, erscheint das Bild seiner linken oberen Ecke zu drehen um. Normalerweise werden Sie ein Bild wollen ihren Mittelpunkt drehen sich um. Ziehen Sie einfach das Bild so sein Zentrum am Ursprung ist. Set X auf Null minus der Hälfte der Breite des Bildes und Y minus die Hälfte der Bildhöhe auf Null.

  6. Schließen Sie die Transformation. Verwenden Sie die wiederherstellen() Verfahren zu beenden die temporäre Koordinatensystem definieren.

Menü