Pfad-Schnittstelle - rect()
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.
rect
void rect(x, y, width, height)
Die Methode erwartet vier Parameter.
Parameter
x - horizontale Start-Koordinate
y - vertikale Start-Koordinate
width - Breite des Rechtecks
height - Höhe des Rechtecks
Schematische Darstellung
Die folgende Abbildung zeigt, wo die übergebenen Grössen angetragen werden.
Beispiel
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
}
}
Erläuterung
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.