Information Technology Reference
In-Depth Information
Die dritte Variante von
drawImage()
bietet - im Gegensatz zu den beiden bishe-
rigen, die auch mit CSS realisierbar gewesen wären - ganz neue Möglichkei-
ten, mit Bildern zu arbeiten. Beliebige Ausschnitte des Quellbildes (
sx
,
sy
,
sw
,
sh
) können jetzt in definierte Bereiche des Ziel-Canvas (
dx
,
dy
,
dw
,
dh
) kopiert
werden. Der Montage von Bildern steht damit nichts mehr im Wege.
image.onload = function() {
context.drawImage(image,0,0);
context.drawImage(
image, 620,300,300,375,390,10,200,250
);
};
Abbildung 5.25:
Yosemite-Nationalpark-Postkarte
Der erste
drawImage()
-Aufruf liefert wiederum das linke obere Viertel mit dem
Taft Point, der zweite extrahiert den Bereich von El Capitan und zeichnet ihn
als Icon in die rechte obere Ecke. Beschriftungen mit Schatten vervollständigen
das rudimentäre Layout unserer Postkarte.
Wer lieber El Capitan im Vordergrund und den Taft Point als Briefmarke rechts
oben sehen will, der muss nur die
drawImage()
-Aufrufe leicht modifizieren - in
unserem Beispiel passiert dies, wenn man auf den Canvas klickt.