Laden einer bereits existierenden Grafikdatei

In vielen Situationen kann es sinnvoll sein, eine bereits existierende Grafik als Grundlage für weitere Bearbeitungen in ein Canvas-Objekt zu laden. Hierbei bedient man sich der Funktion drawImage(Parameterfolge). Hier zunächst ein Beispiel mit der Parameterfolge Grafikobjekt, dx, dy.

<script type="text/javascript">
//Image-Objekt mit Hilfe eines Konstruktors referenzieren
var objImg = new Image();
//Quelldatei für das Image-Objekt festlegen
objImg.src = "skywalk_banner_728x90_01.jpg";
function zeichneCanvas(){
	var myCanvas = document.getElementsByTagName('canvas')[0];
	if(myCanvas.getContext){
		var context = myCanvas.getContext('2d');
		//Image-Objekt an den Koordinaten x=0;y=0 zeichnen
		context.drawImage(objImg, 0, 0);
	}
}
</script>

Beispiel ansehen

Die Parameter dx und dy geben die Position des Bildes im Canvas-Objekt an.

Mit diesem Grafikobjekt kann man auch weitere Manipulationen vornehmen. Die Parameterfolge Grafikobjekt, dx, dy, dw, dh gibt nicht nur die Startposition im Canvas-Objekt an, sondern auch den Abbildungsbereich. Wenn dw und dh von den Größenparamtern des Grafikobjektes abweichen, dann wird das Grafikobjekt vergrößert, verkleinert oder verzerrt dargestellt.

Eine entsprechende Darstellung kann im Beispiel mit einem Buttonklick angezeigt werden. Der Quellcode dazu sieht so aus:

function zeichneCanvas2(){
	var myCanvas = document.getElementsByTagName('canvas')[0];
	if(myCanvas.getContext){
		var context = myCanvas.getContext('2d');
		//Image-Objekt an den Koordinaten x=10;y=10 zeichnen
		//Ausgangsbild wird dabei um die Hälfte verkleinert
		context.drawImage(objImg, 10, 10, objImg.width/2 ,objImg.height/2);
	}
}

Beispiel ansehen

Schließlich gibt es noch eine Parameterfolge, mit der ein Ausschnitt aus dem Garfikobjekt gewählt wird:Grafikobjekt, sx, sy, sw, sh, dx, dy, dw, dh.Wenn dw und dh von sw und sh abweichen, dann wird das Grafikobjekt vergrößert, verkleinert oder verzerrt dargestellt.  Auch hierzu kann entsprechende Darstellung kann im Beispiel mit einem Buttonklick angezeigt werden. Der Quellcode dazu sieht so aus:

function zeichneCanvas3(){
	var myCanvas = document.getElementsByTagName('canvas')[0];
	if(myCanvas.getContext){
		var context = myCanvas.getContext('2d');
		//Image-Objekt an den Koordinaten x=10;y=10 zeichnen
		//Parameter für Auswahlgröße
		sw=150;
		sh=25;
		context.drawImage(objImg, 410, 1, sw,sh,300,30,sw+2,sh*2);
	}
}

Beispiel ansehen