index

Canvas - Inhalt eines Canvaselements zoomen

Um den Inhalt eines Canvaselements zoomen zu können ist ein kleiner Workaround notwendig. Zunächst wird ein Klon des bestehenden Canvaselements erstellt. In diesen wird der bisherige Inhalt geschrieben. Anschliessend wird der Inhalt mit Hilfe der Methode drawImage zurückgeschrieben und skaliert.

Beispiel

Mit der Schaltfläche können zwei Elemente in den Context gezeichnet werden. Mit + wird der Inhalt auf die doppelte Grösse gezoomt, mit dem - auf die Hälfte.

Quellcode

var intWidth = 400;
var intHeight = 400;
var strSrc = "zahnrad3.jpg";

function initCanvas(){
  objCanvas = document.getElementById("canvas_id");
  objCanvas.height = intHeight;
  objCanvas.width = intWidth;
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    objContext = objCanvas.getContext('2d');
  }else{
    // Sonstiger Code
  }
}

function drawSomeStuff(){
  // Falls das Bildobjekt nicht existiert ODER ein anderes Bild angezeigt werden soll
  // => Bild neu generieren und Funktion erneut aufrufen
  if((typeof objImg=="undefined") || (objImg.src.search(new RegExp(strSrc))==-1)){
    objImg = new Image();
    objImg.onload = function(){
      drawSomeStuff();
    }
    objImg.src = strSrc;

    return;
  }

  clearIt();                                   // Canvas leeren

  objContext.drawImage(objImg, 0, 0);          // Bild zeichnen
  objContext.strokeStyle = "rgba(255,0,0,1)";  // Rahmenfarbe rot
  objContext.strokeRect(10, 10, 50, 30);       // Rechteckrahmen zeichnen
}


function scaleIt(dblScaleX, dblScaleY){
  // Dummy-Canvas erstellen und bisherigen Inhalt einfügen
  var objCan = objCanvas.cloneNode(true);
  objCan.getContext('2d').drawImage(objCanvas, 0, 0);

  // Canvas leeren
  clearIt();
  // Inhalt skaliert zeichnen
  objContext.drawImage(objCan, 0, 0, objCan.width*dblScaleX, objCan.height*dblScaleY);
}


function clearIt(){
  objContext.clearRect(0, 0, objCanvas.width, objCanvas.height);
}

window.onload = initCanvas;

Voraussetzung ist ein existierendes Canvas-Element mit der ID canvas_id.