Rechtecke - strokeRect()
Die strokeRect-Methode zeichnet den durch die übergebenen Parameter spezifizierten
Rechteckspfad mit den Bedingungen der Attribute strokeStyle, lineWidth,
lineJoin und falls erforderlich miterLimit.
strokeRect
void strokeRect(x, y, width, height)
Die Methode erwartet vier Parameter. Sind die Höhe und die Breite Null, hat die Methode keinen Effekt, da es sich lediglich um einen Punkt handelt. Ist einer der beiden Parameter Null, so wird eine Linie gezeichnet.
Parameter
x - horizontale Start-Koordinate
y - vertikale Start-Koordinate
width - Breite des Rechtecks
height - Höhe des Rechtecks
Schematische Darstellung
Die folgende Skizze veranschaulicht die übergebenen 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.lineWidth = 10.0; // Liniendicke 10 Pixel
var intRed = 255; // Startwert rot
// Zehn ungefüllte Rechtecke mit unterschiedl. Grösse zeichnen
for(var i=0; i<10; i++){
objContext.strokeStyle = "rgb("+(intRed - i*20)+", 0, 0)";
objContext.strokeRect(10*i, 10*i, 200-i*20, 200-i*20);
}
}else{
// Sonstiger Code
}
}
Erläuterung
Im Beispiel werden unterschiedlich grosse Rechteckkonturen in Rotabstufungen gezeichnet. Zuerst werden die Linienstärke und der Startwert für Rot festgelegt. In einer for-Schleife wird 10-mal der Rotwert um jeweils 20 reduziert und mit dem neuen Farbwert eine Rechteckkontur gezeichnet.