Dokumentation (canvas.quaese.de)
 

Transformationen - rotate()

Mit der Methode rotate wird das Koordinatensystem um den Winkel, der im Parameter übergeben wird, gedreht. Drehzentrum ist der Ursprung.

rotate

void roate(phi)

Die Methode erwartet einen Parameter.

Parameter

phi

phi repräsentiert den Winkel im Bogenmaß. Angetragen wird er im Uhrzeigersinn (= rechter Drehsinn) ausgehend von der x-Achse.

Schematische Darstellung

Die folgende Skizze veranschaulicht die Wirkung des übergebenen Parameters phi. Das orangene Koordinatensystem ist die Basis für die nachfolgenden Operationen.

translate()

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.fillStyle = "#000";
    objContext.translate(60, 60);     // Ursprung verschieben
    objContext.fillRect(0, 0, 2, 2);  // Mittelpunkt

    var intRed = 255;

    for(var i=0; i<32; i++){
      objContext.save();
      objContext.rotate((i*Math.PI/16));
      objContext.fillStyle = "rgb("+(intRed - i*5)+", 0, 0)";
      objContext.fillRect(30, 0, 5, 5);
      objContext.restore();
    }
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Als erstes wird der Ursprung um 60 Einheiten nach rechts und nach unten verschoben. Anschliessend wird mit schwarz ein Mittelpunkt gezeichnet.

In einer for-Schleife werden 32 kleine Quadrate in Rotabstufungen gezeichnet. In jedem Teilschritt wird zunächst der Zeichenbereich mit save auf dem Stack gesichert. Dann wird das Koordinatensystem gedreht und ein kleines Quadrat gezeichnet. Den Abschluss eines Schleifendurchlaufs bildet das Wiederherstellen des Zeichenbereichs mit restore.

Anzeige

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

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