Mit der Methode rect
wird ein neuer Unterpfad angelegt, der durch die vier Punkte
(x, y), (x+width, y), (x+width, y+height) und (x, y+height) beschrieben wird. Die vier Punkte sind durch
Geraden miteinander verbunden und der Pfad geschlossen.
Wird die Methode ausgeführt, wird moveTo automatisch mit den Parametern (0, 0) aufgerufen. Damit ist gewährleistet, dass die Funktion von einem Standardwert ausgehend ausgeführt wird.
void rect(x, y, width, height)
Die Methode erwartet vier Parameter.
Die folgende Abbildung zeigt, wo die übergebenen Grössen angetragen werden.
function drawIt(){ var objCanvas = document.getElementById("canvas_id"); // Falls das Objekt unterstützt wird if(objCanvas.getContext){ // Kontext var objContext = objCanvas.getContext('2d'); var intRadius = 30; // Radius, um den gedreht wird var intFreq = 16; // Wiederholungen (Drehungen) objContext.translate(100, 100); // In Mitte verschieben for(var i=0; i<intFreq; i++){ // canvas-Zustand sichern objContext.save(); // Koordinatensystem drehen objContext.rotate((i/(intFreq/2))*Math.PI); // Koordinatensystem verschieben (um Radius) objContext.translate(intRadius, 0); // Neuen Arbeitspfad erstellen objContext.beginPath(); // Füllung und Kontur festlegen und zeichnen objContext.fillStyle = "rgba("+(255 - i*20)+", 0, 0, 0.7)"; objContext.strokeStyle = "rgba("+(0 + i*20)+", 0, 0, 0.7)"; // Quadrat zeichnen objContext.rect(0, 0, 40, 40); objContext.fill(); // IE (sonst wird nur fill ausgeführt) if(document.all && !window.opera){ // Wg. IE Quadrat erneut zeichnen objContext.beginPath(); objContext.rect(0, 0, 40, 40); } objContext.stroke(); // canvas-Zustand zurücksetzen objContext.restore(); } }else{ // Sonstiger Code } }
Im Beispiel wird ein Rechteck auf einem Radius um einen neuen Ursprung (100, 100) gedreht. Über die
Variable intFreq kann festgelegt werden, wie häufig das Quadrat während eines Kreisumlaufs (2*PI)
angezeigt werden soll. Zum Zeichnen des Quadrats wird die Methode rect
verwendet.
In jedem Schleifendurchlauf der for-Schleife wird der Zustand der Zeichenfläche (canvas) gesichert (save) und am Ende mit restore wieder zurückgesetzt.