• Allgemeines
• Schnittstellen/Objekte
• Canvas-Zustand
• Transformationen
• Rechtecke
• Pfad-Schnittstelle
  • arc()
  • arcTo()
  • beginPath()
  • bezierCurveTo()
  • clip()
  • closePath()
  • fill()
  • isPointInPath()
  • lineTo()
  • moveTo()
  • quadraticCurveTo()
  • rect()
  • stroke()
• Farben und Styles
• Linienstile
• Schatten
• Verknüpfungen
• Bilder zeichnen
• Pixel-Manipulation
• Anwendungen
• Links
• Sitemap
• Impressum

Pfad-Schnittstelle - fill()

Die Methode fill muss jeden Unterpfad des aktuellen Arbeitspfades der Reihe nach ausfüllen. Die Füllmethode wird mittels des Attributs fillStyle beschrieben. Geöffnete Subpfade müssen beim Ausführen der Methode implizit geschlossen werden. Erst dann erfolgt das eigentliche Füllen.

fill

void fill()

Die Methode erwartet keine 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');

    // 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(170, 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