Dokumentation (canvas.quaese.de)

Bilder zeichnen - drawImage

Die Basisvariante der Methode drawImage dient dazu, ein Bild- oder Canvaselement in den Kontext zu rendern.

Weil sich die beiden Versionen (Bild/Canvas) nur im ersten Parameter (Typ der Quelle) unterscheiden, wird nur eine Variante behandelt. Sofern nicht anders angegeben, verhält sich die andere Methode analog.

drawImage

void drawImage(image, x, y)
void drawImage(canvas, x, y)

In der Basisvariante erwartet die Methode drei Parameter.

Parameter

image / canvas - Quellelement, das in den Kontext gerendert werden soll

x - Horizontale Koordinate an der die linke obere Ecke des Quellelements im Kontext positioniert werden soll

y - Vertikale Koordinate an der die linke obere Ecke des Quellelements im Kontext positioniert werden soll

Schematische Darstellung

Die folgende Abbildung zeigt wie ein Bildelement in den Kontext eingebracht wird.

drawImage()

Beispiel

var objImg = new Image();

// IE
if(document.all && !window.opera)
  window.onload = function(){ drawIt();};
// Sonstige
else
  objImg.onload = function(){ drawIt();}

objImg.src = "bild.jpg";

function drawIt(){
  var objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    var objContext = objCanvas.getContext('2d');

    // Bild in Kontext zeichnen
    objContext.drawImage(objImg, 10, 10);
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Zunächst wird ein Bildobjekt instanziiert (new Image()) und eine Bildquelle zugewiesen. Im onload-Event wird die Zeichenfunktion drawIt aufgerufen, in der das Bild in den Kontext gezeichnet wird.