Bilder zeichnen - drawImage (scale)
Die Scale-Variante der Methode drawImage dient dazu, ein Bild- oder Canvaselement in den
Kontext zu rendern. Durch die Angabe von zwei zusätzlichen Parametern kann die Breite dw und
Höhe dh im Canvas angegeben werden. Mit Hilfe dieser Methode kann das Ausgangselement also
skaliert werden.
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, dw, dh) void drawImage(canvas, x, y, dw, dh)
In der Scale-Variante erwartet die Methode fünf 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
dw - Breite des Elements im Kontext
dh - Höhe des Elements im Kontext
Schematische Darstellung
Die Abbildung zeigt wie ein Quellelement (Bild/Canvas) mit neuen Abmessungen (Breite/Höhe) in einen Kontext gerendert wird.
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 vier unterschiedlichen Grössen in Kontext rendern
for(var i=4, j=1; i>0; i--, j++){
objContext.globalAlpha = Math.round((1.0 - (j-1)/10)*10)/10;
objContext.drawImage(objImg, j*10, j*10, parseInt(objImg.width/i), parseInt(objImg.height/i));
}
}else{
// Sonstiger Code
}
}
Erläuterung
Als erstes wird ein Bildobjekt erzeugt (new Image()) und der src-Eigenschaft
die Quelle zugewiesen. In einer for-Schleife wird in jedem Durchlauf ein Bild gezeichnet. Die Grösse
der Grafiken wächst dabei mit jeder Iteration an. Zur besseren Anschaulichkeit werden die Bilder zusätzlich
horizontal und vertikal verschoben und erhalten mit wachsender Grösse mehr Transparenz.