HTML and CSS Reference
In-Depth Information
Die zweite Variante der
drawImage()
-Methode erlaubt die Skalierung des Bilds. Durch
die zusätzlichen zwei Parameter
dw
und
dh
(steht für »destination width« und »destina-
tion height«) wird die Höhe und Breite angegeben, auf die das Bild skaliert werden soll.
Zur Demonstration zeichnen Sie innerhalb einer Schleife das gleiche
image
-Objekt
viermal mit unterschiedlicher Breite und Höhe in den Canvas. Pro Durchgang wird das
Bild an veränderter y-Position gezeichnet, sodass sich die vier Bilder nicht überlappen:
var image new Image();
image.addEventListener('load', function(evt) {
for (var i 0; i<4; i++)
{
var len 10+10*i;
ctx.drawImage(image, (10 + len*i), 50, len, len); //scaling
}
});
image.src 'http://flavor.de/html5/thumbs/calendar.png';
Zu guter Letzt besprechen wir noch die dritte
Variante der
drawImage()
-Methode, die insge-
samt stolze neun Parameter erwartet. Durch diese
Methode kann das Bild nicht nur skaliert werden,
zusätzlich kann aus dem Ursprungsbild ein recht-
eckiger Teil sozusagen herausgeschnitten werden,
der dann in den Ziel-Canvas gesetzt wird.
Bild 2.9:
Illustration der
drawImage()
-
Methode:
http://dev.w3.org/html5/
2dcontext/#images
.
Der
drawImage()
-Aufruf für folgendes Beispiel schneidet aus dem Ursprungsbild ab
Position
(0,0)
, also ab der oberen linken Ecke des Ursprungsbilds, ein 10 x 10 Pixel
großes Quadrat aus. Dieses Quadrat wird an die Position
(10, 80)
in den Ziel-Canvas
gesetzt, jedoch nicht als 10 x 10, sondern als 40 x 40 großes Quadrat.
... gleiches Bild ...
ctx.drawImage(image, 0, 0, 10, 10, 10, 80, 40, 40);
