Information Technology Reference
In-Depth Information
Da in Abbildung 5.34 drei verschiedene Bilder zum Zuge kommen und alle drei
vor ihrer Verwendung vollständig geladen sein müssen, bleibt uns nichts ande-
res übrig, als die drei
onload
-Funktionen ineinander zu verschachteln. Nur so
behalten wir die Kontrolle über die Reihenfolge beim Zeichnen. Der Pseudo-
Code für eine mögliche Schachtelung sieht so aus:
// alle Bilder erzeugen
bg.onload = function() {
// Hintergrund zeichnen
image.onload = function() {
// Bildausschnitte hinzufügen
pat.onload = function() {
// Titel mit Muster füllen
};
};
};
Die einzige Möglichkeit, dieses Verschachteln zu vermeiden, wäre, alle betei-
ligten Bilder im HTML-Code der Seite als über
visibility:hidden
versteckte
img
-Elemente zu verlinken und mit
getElementById()
oder
getElementsByTag-
Name()
nach dem Laden der Seite in
window.onload()
zu referenzieren.
Bevor wir uns mit einem weiteren Abschnitt der Canvas-Spezifikation, den
Transformationen
beschäftigen, bleibt abschließend noch festzuhalten, dass
bei der Verwendung eines
video
-Elements als Quelle für
createPattern()
ana-
log zur
drawImage()
-Methode der erste Frame des Videos beziehungsweise der
Poster-Frame, sofern vorhanden, als Muster zum Einsatz kommt.
5.11 Transformationen
Canvas-Transformationen manipulieren direkt das Koordinatensystem. So
wird beim Verschieben eines Rechtecks nicht nur das Element selbst bewegt,
sondern gleich das gesamte Koordinatensystem neu gesetzt und erst dann das
Rechteck gezeichnet. Die drei einfachen Grundtransformationen sind
scale()
,
rotate()
und
translate()
.
