Dokumentation (canvas.quaese.de)
 

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.

rect()

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.

Anzeige

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

 
Dokument zuletzt modifiziert: 02.11.2008, 22:00 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap