Eine weiteres Merkmal des HTMLCanvasElements
ist die Fähigkeit, Bilder verarbeiten zu können.
Dadurch stehen einem vielfältige Möglichkeiten offen - zum Beispiel Fotos kombinieren, Schriften als
Bilder einbetten oder themenbezogene Hintergründe platzieren.
Als Bildquelle können andere Canvaselemente genauso verwendet werden wie externe Bilder. Die unterstützten Formate werden im zweiten Fall durch den verwendeten Browser vorgegeben. Im allgemeinen können PNG, GIF und JPEG problemlos benutzt werden.
Externe Bildquellen sollten fertig geladen sein, wenn sie im Kontext verwendet werden. Andernfalls stoppt die Programmausführung an entsprechender Stelle, bis das benötigte Bild komplett geladen wurde.
Es existieren unterschiedliche Möglichkeiten, Bilder einzubinden.
Es stehen unterschiedliche Methoden zur Verfügung, die Zugriff auf HTMLImageElemente
erlauben -
getElementsByTagName
(Zugriff über den Tag-Name),
getElementById
(Zugriff über eine ID) oder über das Objekt / die Kollektion
document.images.
Ein neues Bildobjekt kann mit Hilfe des Konstruktors new Image()
referenziert werden. Die Quelle
(source) des externen Bildes wird der Eigenschaft src
zugewiesen.
var objImg = new Image(); objImg.src = "bild.png";
Bilder können unmittelbar über den URL als Base-64-kodierter String in den Quellcode eingebunden werden.
Mehr zu diesem Thema bei Wikipedia unter dem Artikel data: url. Ein Tutorial von OnlyFoo zum Erstellen von Bitmaps mit JavaScript findet sich hier.
Um zu gewährleisten, dass das benötigte Bild zum Zeitpunkt seiner Verwendung komplett geladen wurde, stehen unterschiedliche Möglichkeiten zur Verfügung.
window.onload = function(){ // Zeichenroutine mit Ermittlung des Bildelements }
var objImg = new Image(); objImg.onload = function(){ // Zeichenfunktionen mit dem Bildobjekt } objImg.src = "bild.png";
Es können auch andere HTMLCanvasElements
innerhalb des Dokuments als Bildquelle verwendet werden.
Um Zugriff auf diese Elemente zu erlangen stellt das DOM die Methoden
getElementsByTagName
(Zugriff über den Tag-Name) und
getElementById
(Zugriff über ID) zur Verfügung.
drawImage
- (Methode) Mehrfach überladene Methode, die in ein Bild oder den Kontext zeichnet