Information Technology Reference
In-Depth Information
Gleichzeitig wird das Koordinatensystem auf die Einheitsmatrix initialisiert und
eine Clipmaske erzeugt, die die ganze Canvas-Fläche umfasst:
context.setTransform(1, 0,0,1,0,0);
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.clip();
Ändern wir Attribute, Transformationen oder Clipmasken, bleiben diese so lan-
ge gültig, bis wir sie erneut verändern. Bei komplexen Grafiken kann man da
schon leicht den Überblick verlieren. Genau an dieser Stelle kommen
context
.save()
und
context.restore()
ins Spiel.
Durch
context.save()
erzeugen wir nämlich zu jedem beliebigen Zeitpunkt ei-
nen Schnappschuss, der die bis dahin gesetzten Attribute und Transformationen
unter Berücksichtigung der aktuellen Clipmaske speichert. Diesen Schnapp-
schuss können wir zu einem späteren Zeitpunkt bequem über
context.resto-
re()
wieder abrufen. Die Spezifikation spricht in diesem Zusammenhang vom
stack of drawing states
, denn Schnappschüsse dürfen auch verschachtelt sein.
Gut einsetzbar ist diese Technik, wenn Transformationen oder Clipmasken im
Spiel sind. Auch bei Schatteneffekten ist es einfacher, mit
context.save()
und
context.restore()
die vier Schattenkomponenten gleichzeitig wieder auf ihre
Defaultwerte zurückzusetzen, als jede Komponente einzeln zu setzen. Beinahe
unerlässlich sind
context.save()
und
context.restore()
im nun folgenden Ab-
schnitt, bei den Animationen.
5.14 Animationen
Anders als SVG- oder SMIL-Animationen sind Canvas-Animationen reine Hand-
arbeit. Ingredienzen dafür sind eine Funktion zum Zeichnen plus ein Timer, der
diese in regelmäßigen Abständen aufruft. Für den Zeitgeber stellt JavaScript
window.setInterval()
zur Verfügung, der Rest ist dem Einfallsreichtum des
Canvas-Programmierers überlassen.
5.14.1 Animation farbiger Kugeln
Unsere Animations-Premiere besteht aus Kugeln in verschiedenen Farben, die
an zufälligen Positionen der Canvas-Fläche erscheinen, langsam verblassen
und währenddessen durch neue Kugeln überdeckt werden. Das Tempo der Ani-
mation soll mit circa 60 Schlägen pro Minute dem Ruhepuls eines Erwachse-
