Das Attribut fillStyle
repräsentiert die Farbe oder den Stil, der zum Füllen einer
Form verwendet wird.
Dem Attribut kann sowohl ein String als auch ein CanvasGradient- oder CanvasPattern-Objekt zugewiesen werden.
fillStyle = value
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.fillStyle = "#f00"; objContext.fill(); // 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.fillStyle = "#0f0"; objContext.fill(); // Dritte Form (Kreis) objContext.beginPath(); objContext.moveTo(195, 35); objContext.arc(170, 35, 25, 0, 2*Math.PI, true); // Füllmethode (blau) objContext.fillStyle = "#00f"; objContext.fill(); }else{ // Sonstiger Code } }
Im Beispiel werden drei Formen mit Hilfe von drei unterschiedlichen Arbeitspfaden konstruiert. Bei der ersten
Form handelt es sich um ein rotes Quadrat. Die Füllfarbe wird mit
fillStyle
festgelegt und durch Aufruf der Methode
fill
der Form zugewiesen. Nach dem gleichen Prinzip werden
noch das Dreieck und der Kreis gefüllt - lediglich die Füllfarben unterscheiden sich.