<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.