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>
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);
}
}
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);
}
}