Dokumentation (canvas.quaese.de)
Farben und Styles - strokeStyle
Das Attribut strokeStyle repräsentiert die Farbe oder den Stil, der beim Zeichnen einer Kontur um eine
Form verwendet wird.
Dem Attribut kann sowohl ein String als auch ein CanvasGradient- oder CanvasPattern-Objekt zugewiesen werden.
strokeStyle
strokeStyle = value
value - String, CanvasGradient- oder CanvasPattern-Objekt
Beispiel
function drawIt(){
var objCanvas = document.getElementById("canvas_id");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext('2d');
// Neuen Arbeitspfad anlegen
objContext.beginPath();
// Erste Form (Quadrat)
objContext.moveTo(10, 10);
objContext.lineTo(60, 10);
objContext.lineTo(60, 60);
objContext.lineTo(10, 60);
objContext.lineTo(10, 10);
// Füllmethode (rot)
objContext.strokeStyle = "#f00";
objContext.stroke();
// Zweite Form (Dreieck)
objContext.beginPath();
objContext.moveTo(105, 10);
objContext.lineTo(130, 60);
objContext.lineTo(80, 60);
objContext.lineTo(105, 10);
// Füllmethode (grün)
objContext.strokeStyle = "#0f0";
objContext.stroke();
// Dritte Form (Kreis)
objContext.beginPath();
objContext.moveTo(195, 35);
objContext.arc(170, 35, 25, 0, 2*Math.PI, true);
// Füllmethode (blau)
objContext.strokeStyle = "#00f";
objContext.stroke();
}else{
// Sonstiger Code
}
}
Erläuterung
Im Beispiel werden drei Formen mit Hilfe von drei unterschiedlichen Arbeitspfaden konstruiert. Bei der ersten
Form handelt es sich um ein Quadrat mit roter Kontur. Die Linienfarbe wird mit strokeStyle
festgelegt und durch Aufruf der Methode
stroke der Form zugewiesen. Nach dem gleichen Prinzip werden
noch das Dreieck und der Kreis gefüllt - lediglich die Füllfarben unterscheiden sich.