Dokumentation (canvas.quaese.de)
 

<canvas> - Transformationen

Transformationen werden auf die Koordinaten von Formen und Pfaden bei deren Erstellung angewandt. Transformationsangaben werden in der Transformationsmatrix gespeichert.

Bei der Initialisierung muss die Transformationsmatrix die identische Transformations sein, dh. keine Skalierung, keine Drehung und keine Verschiebung.

Tipp

Werden Transformationen durchgeführt, wird empfohlen vorher mit der Methode save den aktuellen Zustand auf dem Zeichenstack zu sichern. Nachdem die gewünschten Aktionen ausgeführt wurden, kann mit restore der Ausgangszustand wiederhergestellt werden. So kann das aufwändige "Rückwärtswiederherstellen" umgangen werden.

Zu beachten:

Soll ein Pfad einer Transformation unterzogen werden, so muss dies vor seiner Konstruktion erfolgen. Im Klartext heisst das, erst die Transformationsregeln festlegen, dann die Pfadkonstruktion durchführen.

Attribute und Methoden

  • scale - (Methode) Skaliert den Inhalt des Kontextes
  • rotate - (Methode) Drehung des Inhalts
  • translate - (Methode) Verschieben des Inhalts
  • transform - (Methode) multipliziert die aktuelle Transformationsmatrix (mit Parameterwerte)
  • setTransform - (Methode) setzt die aktuelle Transformationsmatrix (auf Parameterwerte)

Beispiel

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

    objContext.save();
    objContext.fillStyle = "#00f";
    objContext.translate(80, 80);

    var intRed = 255;
    for(var i=1; i<=16; i++){
      objContext.rotate((1/8)*Math.PI);
      objContext.fillStyle = "rgb("+(intRed - i*10)+", 0, 0)";
      objContext.fillRect(0, 0, 40, 40);
    }

    objContext.restore();
    objContext.strokeStyle = "#fff";
    objContext.strokeRect(50, 50, 60, 60);
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Zu Beginn wird der aktuelle Zustand mit Hilfe der Methode save auf dem Stack gesichert. Als nächstes wird der Ursprung des Zeichenbereichs um 80 Pixel in x- und y-Richtung verschoben (Translation). In einer for-Schleife wird der Zeichenbereich in 8 Schritten einmal um 2*PI (=360° oder eine komplette Umdrehung) um den Ursprung gedreht. In jedem Teilschritt wird ein Quadrat in einer Rotabstufung gezeichnet.

Zum Schluss wird der Ausgangszustand mit restore wiederhergestellt und eine Rechteckkontur gezeichnet.

Anzeige

Ihr Browser unterstützt das canvas-Element leider nicht.

 
Dokument zuletzt modifiziert: 05.02.2008, 14:27 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap