JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 430

Bild 14.21■ Einfaches Anzeigen eines Bilds
Bilder skalieren und/oder verzerren
Die zweite Variante der Methode besitzt noch zwei weitere Parameter für die Breite und
Höhe des Bilds, um es darüber zu skalieren. Damit können Sie ein Bild auch verzerren
(kap14_18.js):
Listing 14.43■ Ein Bild anzeigen und skalieren
...
zb.drawImage(bild,10,50,400,50);
...
Bildausschnitte
Die dritte Variante der Methode ist deutlich am lexibelsten und verwendet neun Parameter.
Mit dieser Variante können Sie Teile eines Originalobjekts ausschneiden und auf dem
Canvas -Element ausgeben. Dabei können Sie zudem die Ausgabe auf einfache Weise skalie-
ren. Die schematische Syntax ist folgende:
Listing 14.44■ Die dritte Variante der Methode
drawImage(bild, sx, sy, qBreite, qHoehe, dx, dy, zBreite, zHoehe)
Der erste Parameter ist wieder die Graik, allerdings hier als Referenz auf ein Bildobjekt
oder auch allgemein ein anderes Canvas -Element zu betrachten 11 . Die anderen acht Parame-
ter sind in zwei Gruppen sortiert. Die ersten vier deinieren wie bekannt die Position und
die Größe des Ausschnitts eines Quellbereichs. Die letzten vier Parameter hingegen deinie-
ren die Position und die Größe des Ausschnitts im Canvas -Bereich, wo der Quellausschnitt
11 Jedes Canvas -Element ist ja auch ein Bild (vom Typ PNG).