Dokumentation (canvas.quaese.de)
 

<canvas> - Bilder zeichnen

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.

Bilder als Bildquellen

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.

Bilder aus dem Dokument

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.

Externe Bilder

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 über den URL

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.

Verfügbarkeit eines Bildelements

Um zu gewährleisten, dass das benötigte Bild zum Zeitpunkt seiner Verwendung komplett geladen wurde, stehen unterschiedliche Möglichkeiten zur Verfügung.

  1. Das Script wird im Dokument hinter das verwendete dokumentinterne Bild eingebunden.
  2. Das Script wird im onload-Event des Dokuments aufgerufen.
    window.onload = function(){
      // Zeichenroutine mit Ermittlung des Bildelements
    }
  3. Das Zeichenscript wird im onload-Event des Bildes aufgerufen
    var objImg = new Image();
    objImg.onload = function(){
      // Zeichenfunktionen mit dem Bildobjekt
    }
    objImg.src = "bild.png";

Canvaselemente als Bildquellen

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.

Attribute und Methoden

  • drawImage - (Methode) Mehrfach überladene Methode, die in ein Bild oder den Kontext zeichnet
 
Dokument zuletzt modifiziert: 14.10.2016, 18:00 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap