Mit der Methode rotate
wird das Koordinatensystem um den Winkel, der im
Parameter übergeben wird, gedreht. Drehzentrum ist der Ursprung.
void roate(phi)
Die Methode erwartet einen Parameter.
phi repräsentiert den Winkel im Bogenmaß. Angetragen wird er im Uhrzeigersinn (= rechter Drehsinn) ausgehend von der x-Achse.
Die folgende Skizze veranschaulicht die Wirkung des übergebenen Parameters phi. Das orangene Koordinatensystem ist die Basis für die nachfolgenden Operationen.
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 } }
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.