Information Technology Reference
In-Depth Information
context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
In allen drei Fällen benötigen wir im ersten Parameter ein
image
-,
canvas
- oder
video
-Element, das dynamisch über JavaScript oder statisch im HTML-Code
eingebunden sein kann. Animierte Bilder oder Videos werden dabei allerdings
nicht bewegt dargestellt, sondern statisch durch ihren ersten Frame bezie-
hungsweise einen Poster-Frame, sofern dieser vorhanden ist.
Alle weiteren Argumente der
drawImage()
Methode beeinflussen Position, Grö-
ße oder Ausschnitt des Quellrasters im Ziel-Canvas. Abbildung 5.21 liefert die
grafische Interpretation der möglichen Positionsparameter, wobei die Präfixe
s
für
source
(Quelle) und
d
für
destination
(Ziel) stehen.
Abbildung 5.21:
Positionsparameter der »drawImage()«-Methode
Vergleichen wir nun die einzelnen
drawImage()
-Methoden anhand von drei ein-
fachen Beispielen. Das gemeinsame Setup besteht aus einem 1200 x 800 Pixel
großen Bild, das dynamisch als JavaScript-Objekt erzeugt wird.
var image = new Image();
image.src = 'images/yosemite.jpg';
