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.
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.