Dokumentation (canvas.quaese.de)
 

<canvas> - Rechtecke (einfache Formen)

Wie bei SVG ist das Rechteck die einzige Form, die canvas kennt. Alle sonstigen Formen müssen über Pfade konstruiert werden.

Es existieren drei Methoden zum unmittelbaren Zeichen von Rechtecken in eine Bitmap. Jede erwartet drei Argumente - die ersten beiden geben die x- und y-Koordinaten der linken oberen Ecke des Rechtecks an, die anderen beiden die Breite und die Höhe.

Formen werden gezeichnet, ohne den Pfad zu beeinflussen, sind aber Clipping-Pfaden und mit Ausnahme der clearShape-Methode, Schatteneffekten, globalen Alpha- und Verknüpfungsoperatoren unterstellt.

Attribute und Methoden

  • clearRect - (Methode) Löscht den Inhalt eines Rechtecks (beschrieben durch die Parameter)
  • fillRect - (Methode) Füllt den Inhalt eines Rechtecks (beschrieben durch die Parameter)
  • strokeRect - (Methode) Zeichnet die Umfanglinien eines Rechtecks (beschrieben durch die Parameter)

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.fillRect(20, 20, 100, 100);  // Gefülltes Rechteck

    // Falls es kein IE ist
    if(!(/MSIE/.test(navigator.userAgent) && !window.opera))
      objContext.clearRect(30, 30, 30, 30); // Rechteck löschen

    objContext.strokeStyle = "#fc0";        // Linienstil
    objContext.strokeRect(50, 50, 40, 40);  // Ungefülltes Rechteck
  }else{
    // Sonstiger Code
  }
}

Erläuterung

Es wird ein gefülltes Rechteck gezeichnet. Als Füllfarbe dient der Defaultwert schwarz. Dann wird mit clearRect ein Bereich von 30 Pixeln x 30 Pixeln gelöscht. Nachdem die Linienfarbe auf orange gesetzt wurde, werden die Konturen eines Rechtecks gezeichnet.

Anzeige

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

 
Dokument zuletzt modifiziert: 05.02.2008, 14:27 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap