Dokumentation (canvas.quaese.de)
 

Farben und Styles - fillStyle

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

fillStyle = 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.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
  }
}

Erläuterung

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.

Anzeige

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

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