Canvas/Bilder

Neben den bereits vorgestellten Funktionen, mit denen geometrische Formen und Flächen auf das Canvas-Element gezeichnet werden können, ist es mit Canvas auch möglich, Bilder darzustellen. Hierfür existiert die Funktion drawImage(), die in folgenden drei Varianten vorliegt:

• drawImage(img, dx, dy): Zeichnet ein img, canvas oder video-Element an der angegebenen Position auf das Canvas-Element.
• drawImage(img, dx, dy, dwidth, dheight): Die Funktionsweise dieser Variante ähnelt der ersten. Jedoch wird im Gegensatz zu dieser das zu zeichnende Bild auf die angegebenen Maße dwidth und dheight skaliert
• drawImage(img, sx, sy, swidth, sheight, dx, dy, dwidth, dheight): Die Funktionsweise dieser Variante ähnelt der ersten. Einziger Unterschied ist, dass die Funktion nicht das ganze Bild zeichnet, sondern lediglich denjenigen Teil, der sich innerhalb des durch die Parameter 2 bis 5 aufgespannten Rechtecks befindet. Danach wird der Ausschnitt ebenso wie in Variante 2 auf die Maße dwidth und dheight gebracht, sofern er diese Maße nicht bereits hat.

Beispiel ansehen …

  function zeichne() {
    var element = document.getElementById('canvas');
 
   if (element.getContext) {
     var context = element.getContext('2d');
     var img = document.getElementById('meinBild');
 
     context.clearRect(0, 0, context.width, context.height);
     context.drawImage(img, 10, 10);
     context.drawImage(img, 300, 10, img.width/2, img.height/2);
     context.drawImage(img, 0, 0, img.width/2, img.height/2, 270, 200, img.width/2, img.height/2);
  }
}

In diesem Beispiel wird dreimal hintereinander dasselbe Bild gezeichnet.

Dabei wird, nachdem das Context-Objekt geholt und die Zeichenfläche geleert wurde, mithilfe von drawImage() das vorher mittels getElementById geholte img-Element auf das Canvas-Element gezeichnet:

1. das linke, obere Bild wird im Punkt (10 |10) gezeichnet.
2. die zweite dieser Zeichnungen beginnt im Punkt (300 |10), hat aber nur die halbe Höhe und Breite.
3. die dritte Zeichnung verwendet dabei jedoch nur den Teil des img-Elements, der sich im oberen linken Quadranten des Bildes befindet. Die letzten vier Argumente geben die Position (270 | 200) und Größe (img.width/2, img.height/2) an. Da der Ausschnitt nur die halbe Breite und Höhe hat, werden diese Maße wieder halbiert.

• Stile und Farben
• Canvas
  (Übersicht)
• Text

Weblinks

• W3C: Drawing images
• WHATWG: canvas-Element
  • WHATWG: Drawing images