JavaScript/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, sofern es nicht die angegebenen Ausmaße dwidth und dheight besitzt, mithilfe einer Vergrößerung oder Verkleinerung auf diese gebracht.
• 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 nicht sowieso schon hatte.

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 seine Oberflä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 Variablen 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