So wird’s gemacht: Animieren von Grafiken auf einer Canvas (HTML)

Artikel
03/04/2016

[ 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):

Beispiel für einen von einer Canvasanimation gezeichneten spiralförmigen Kreis

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 der clip-Methode Pfade beschneiden. Am einfachsten können Sie eine Canvas mit der clearRect-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 die clearRect-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 die restore-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 der save-Methode wird der aktuelle Canvaszustand im Stapel gespeichert. Die restore-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 der translate-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 die rotate-Methode. Der erste Aufruf der translate-Methode zentriert die Animation auf der Canvas.

Als Nächstes führen wir zwei Sätze von Aufrufen für die rotate-Methode und die translate-Methode aus. Die ersten Aufrufe der Methoden rotate und translate 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 der date-Methode mit dem rotate-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 von getMilliseconds 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 und translate-Methoden wirken sich so aus:

Die nächsten zwei Aufrufe der Methoden rotate und translate 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 von getMilliseconds der Wert 6.000 verwendet wird.

Wenn die ersten rotate- und translate-Methoden auskommentiert werden, zeichnen die zweiten rotate- und translate-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>