So wird’s gemacht: Animieren von Grafiken auf einer Canvas (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]
Das Canvaselement ist ein Zeichenbereich im HTML-Dokument, in dem Sie mit JavaScript Grafiken wie beispielsweise Animationen, Diagramme und Spiele generieren können. Dieses Thema erleichtert Ihnen mit einer Beschreibung der Schritte zum Animieren einer einfachen Zeichnung mit dem Canvaselement den Einstieg.
Voraussetzungen
In diesem Thema wird Folgendes vorausgesetzt:
- Sie können eine einfache Windows Store-App mit JavaScript erstellen, die die Vorlage "Windows-Bibliothek für JavaScript" verwendet.
- Sie besitzen Grundkenntnisse in HTML und JavaScript.
Anweisungen zum Erstellen Ihrer ersten Windows Store-App mit JavaScript finden Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript. Anweisungen zur Verwendung der Vorlage "WinJS" finden Sie unter "Herunterladen und Verwenden des WinJS-Toolkits".
Anweisungen
Schritt 1: Zeitliche Steuerung der Animation
Mit der requestAnimationFrame-Methode beginnen Sie eine Animation, indem Sie eine Funktion angeben, die stets aufgerufen wird (Rückruf), wenn die Animation für die nächste Neuzeichnung aktualisiert werden soll:
requestAnimationFrame(animationFunction);
requestAnimationFrame berücksichtigt die Seitensichtbarkeit und die Aktualisierungsrate der Anzeige, um die Anzahl der Frames pro Sekunde für die Animation zu bestimmen (d. h. Aufruf von animationFunction
).
In unserem JavaScript-Beispiel wird ein animierter Kreis gezeichnet, der sich spiralförmig um einen größeren Kreis bewegt.
requestAnimationFrame(draw);
Dies ist unsere Animation (Ergebnisse können abweichen, bei schnellerer Hardware werden engere Kreise erzielt):
Schritt 2: Zeichnen des Bilds
Leeren der Canvas
Sie müssen den Zeichenbereich leeren, bevor Sie die einzelnen Frames zeichnen.
Es gibt verschiedene Methoden zum Leeren einer Canvas oder von Teilen eines Bilds. Sie können beispielsweise mit der
globalCompositOperation
-Eigenschaft bestimmte Bereiche leeren oder mit derclip
-Methode Pfade beschneiden. Am einfachsten können Sie eine Canvas mit derclearRect
-Methode leeren.In unserem Beispiel wird mit der
clearRect
-Methode die gesamte Canvas geleert. Damit die Auswirkungen beim Zeichnen des Bilds besser zu sehen sind, ist dieclearRect
-Methode jedoch auskommentiert. Wenn diese Codezeile unkommentiert wäre, würden Sie einen einzigen Kreis sehen, der sich spiralförmig um eine größere kreisförmige Umlaufbahn bewegt und dessen Spur jedes Mal vor dem Zeichnen der einzelnen Frames gelöscht wird.// The clearRect method clears the entire canvas. context.clearRect(0, 0, 160, 160);
Speichern des Canvaszustands
Wenn Sie das Bild zeichnen, ändern Sie möglicherweise eine der Einstellungen, beispielsweise Formatvorlagen oder Transformationen. Wenn Sie zu Beginn jeder Neuzeichnung des Bilds die Originaleinstellungen verwenden möchten, können Sie die
save
-Methode verwenden.Die
save
-Methode und dierestore
-Methode werden verwendet, um den Canvaszustand für einen Stapel zu speichern und abzurufen. Der Canvaszustand umfasst alle angewendeten Formatvorlagen und Transformationen. Bei jedem Aufruf dersave
-Methode wird der aktuelle Canvaszustand im Stapel gespeichert. Dierestore
-Methode gibt den letzten gespeicherten Zustand aus dem Stapel zurück.In unserem Beispiel verwenden wir die
save
-Methode kurz vor dem Festlegen einiger Transformationen, um den animierten Kreis zu zeichnen und zu verschieben.// Save the canvas state. context.save();
Zeichnen des Bilds
Beim Zeichen des Bilds auf die Canvas können Sie zwei Transformationen verwenden, um Änderungen an dem Bild vorzunehmen: die Methoden "translate" und "rotate".
Die Methode "translate" wird verwendet, um die Canvas und ihren Ursprung an eine andere Stelle im Canvasraster zu verschieben:
translate(x, y)
Diese Methode akzeptiert zwei Argumente: "x" gibt an, wie weit die Canvas nach links oder rechts verschoben wird, und "y" gibt an, wie weit die Canvas nach oben oder unten verschoben wird.
Es empfiehlt sich, den Canvaszustand zu speichern, bevor Sie Transformationen ausführen. Es ist nämlich leichter, die
restore
-Methode aufzurufen, als die Canvas durch umgekehrte Translation wieder in ihren Originalzustand zu versetzen. Mit dertranslate
-Methode können Sie das Bild an einer beliebigen Stelle auf der Canvas platzieren, ohne die Koordinaten manuell anzupassen.Die
rotate
-Methode wird verwendet, um die Canvas um den aktuellen Ursprung zu drehen. Diese Methode hat nur einen Parameter: den in Radianten gemessenen Winkel, um den die Canvas gedreht wird.rotate(angle)
Die Drehung wird im Uhrzeigersinn ausgeführt, und der Mittelpunkt der Drehung ist immer der Canvasursprung (die obere linke Ecke). Um den Mittelpunkt zu verschieben, müssen Sie die Canvas mit der
translate
-Methode verschieben.In unserem Beispiel verwenden wir abwechselnd einige Aufrufe für die
translate
-Methode und dierotate
-Methode. Der erste Aufruf dertranslate
-Methode zentriert die Animation auf der Canvas.Als Nächstes führen wir zwei Sätze von Aufrufen für die
rotate
-Methode und dietranslate
-Methode aus. Die ersten Aufrufe der Methodenrotate
undtranslate
erzeugen einen kleinen Kreis, der in einer großen Schleife um die Canvas gezeichnet wird. Der zweite Satz von Aufrufen erzeugt einen kleinen Kreis, der in einer viel kleineren Umlaufbahn gezeichnet wird.Die Canvasgröße wird auf eine Breite von 160 Pixel und eine Höhe von 160 Pixel festgelegt. Also legen wir die x- und y-Koordinaten der "translate"-Methode auf "80" fest, damit die gesamte Animation auf der Canvas zentriert ist.
// centers the image on the canvas context.translate(80, 80);
Den ersten Aufruf der
rotate
-Methode beginnen wir, indem wir den Parameter derdate
-Methode mit demrotate
-Objekt berechnen. Dieser Parameter ist der Winkel, um den die Canvas gedreht werden soll.var time = new Date(); context.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
Beachten Sie, dass zum Berechnen von
getSeconds
der Wert 60 und zum Berechnen vongetMilliseconds
der Wert 60.000 verwendet wird.Die
translate
-Methode verschiebt die x-Koordinate und verschiebt damit den sich drehenden Kreis in einer großen Umlaufbahn um die Canvas.// Translate determines the size of the circle's orbit. context.translate(50, 0);
Die ersten
rotate
undtranslate
-Methoden wirken sich so aus:Die nächsten zwei Aufrufe der Methoden
rotate
undtranslate
erstellen eine kleinere Umlaufbahn für Kreise mit Schleifen.// Rotate causes the circle to move in a small orbit. context.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() ); // Translate determines the size of the orbit. context.translate(0, 5);
Beachten Sie, dass bei der Berechnung des Winkels für den zweiten Aufruf von rotate für die Berechnung von
getSeconds
der Wert 6 und für die Berechnung vongetMilliseconds
der Wert 6.000 verwendet wird.Wenn die ersten
rotate
- undtranslate
-Methoden auskommentiert werden, zeichnen die zweitenrotate
- undtranslate
-Methoden Folgendes:Wenn die Neupositionierung vollständig festgelegt ist, wird der Kreis auf der Canvas gezeichnet.
// This draws the repositioned circle context.beginPath(); context.arc(5, 5, 4, 0, Math.PI*2, true); context.stroke();
Wiederherstellen des Canvaszustands
Wir haben den Canvaszustand vorhin in Schritt b gespeichert und setzen ihn daher jetzt zum Zeichnen des nächsten Frames zurück.
// Restores the canvas to the previous state context.restore();
Vollständige Beispiele
Animierte Grafik
In diesem JavaScript-Beispiel wird ein animierter Kreis gezeichnet, der sich spiralförmig um einen größeren Kreis bewegt.
window.onload = init;
// As an optimization, make "context" a global variable that is only set once.
var context;
function init(){
context = document.getElementById('canvas').getContext('2d');
window.requestAnimationFrame(draw);
} // init
function draw() {
// Save the canvas state.
context.save();
// context.clearRect(0, 0, 160, 160);
// centers the image on the canvas
context.translate(80, 80);
// Rotate moves the spiraling circle around the canvas in a large orbit.
var time = new Date();
context.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
// Translate determines the location of the small circle.
context.translate(50, 0);
// Rotate causes the circle to spiral as it circles around the canvas.
context.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
// determines the size of the loop
context.translate(0, 5);
// This draws the circle
context.beginPath();
context.arc(5, 5, 4, 0, Math.PI*2, true);
context.stroke();
// Restores the canvas to the previous state
context.restore();
window.requestAnimationFrame(draw);
} // draw
Dies ist ein Beispiel für ein Cascading Stylesheet (CSS), das einen schwarzen Rahmen um ein Canvaselement erstellt.
/* style the canvas element with a black border. */
canvas { border: 1px solid black; }
Diese HTML-Datei erstellt ein Canvaselement und verwendet externe JavaScript- und CSS-Dateien.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="myJavascript.js"></script>
<link Rel="stylesheet" Href="myStyle.css" Type="text/css">
</head>
<body>
<canvas id="canvas" width="160" height="160" />
</body>
</html>