HTML and CSS Reference
In-Depth Information
werden nur die Methoden vorgestellt, die mit vorhandenen Bildern arbeiten, sprich mit
HTML- img -Elementen oder JavaScript-Image-Objekten.
Bevor wir Bilder in einen Canvas einfügen können, müssen wir sie zunächst laden. Da
wir mittels JavaScript-API auf den Canvas zugreifen, bietet es sich an, ein JavaScript-
Image-Objekt zu erstellen und dessen load -Event abzuwarten, da dadurch sichergestellt
ist, dass das referenzierte Bild vollständig geladen ist.
var image new Image();
image.addEventListener('load', function(evt) {
ctx.drawImage(image, 10, 10);
});
image.src 'http://flavor.de/html5/thumbs/calendar.png';
Bild 2.8: Das Kalender-Icon im Canvas.
Zunächst erstellen wir ein neues JavaScript-Image-Objekt. Im zweiten Schritt wird ein
Event-Handler für das load -Event registriert. Sobald das Bild vollständig geladen ist,
wird damit die Funktion drawImage() aufgerufen. Um nun das Laden des Bilds auszu-
lösen, wird die src -Eigenschaft des Image-Objekts gesetzt, wodurch der Browser ver-
sucht, das per URL referenzierte Bild sofort zu laden.
Selbstverständlich können Sie auch alle bereits vorhandenen Bilder auf der aktuellen
HTML-Seite referenzieren und innerhalb des Canvas benutzen. Die Methode
document.getElementsByTagName('img') liefert Ihnen beispielsweise alle HTML-
Image-Elemente der aktuellen Seite. Wenn die ID eines Bilds bekannt ist, können Sie das
Bild auch per document.getElementbById('meineId') referenzieren.
Betrachten wir nun die drawImage() -Methoden des HTML5-Canvas genauer:
void drawImage(in HTMLImageElement image, in float dx, in float dy);
void drawImage(in HTMLImageElement image, in float dx, in float dy,
in float dw, in float dh);
void drawImage(in HTMLImageElement image, in float sx, in float sy, in float
sw,
in float sh, in float dx, in float dy, in float dw, in float dh);
Die einfachste Form der drawImage() -Methode benötigt lediglich drei Parameter, und
zwar einmal eine Referenz auf das zu zeichnende Bild, also ein HTMLImageElement oder
ein HTML- canvas -Element. Mit den Parametern dx und dy wird die Position im
Canvas angegeben, ab der das Bild gezeichnet werden soll. Dabei wird die obere linke
Kante des Bilds angegeben. Das Bild wird in diesem Fall mit der Originalhöhe und
-breite ab dieser Position in den Ziel-Canvas übernommen. Das obige Beispiel demonst-
rierte die Anwendung bereits.
Search WWH ::




Custom Search