HTML-Canvas- fill()- Methode

❮ HTML-Canvas-Referenz

Beispiel

Zeichnen Sie zwei 150*100 Pixel große Rechtecke. Füllen Sie eine mit einer roten Farbe und die andere mit einer blauen Farbe:

Ihr Browser unterstützt den HTML5-Canvastag nicht.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();

ctx.beginPath();
ctx.rect(40, 40, 150, 100);
ctx.fillStyle = "blue";
ctx.fill();

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.

Method
fill() Yes 9.0 Yes Yes Yes

Definition und Verwendung

Die Methode fill() füllt die aktuelle Zeichnung (Pfad). Die Standardfarbe ist schwarz.

Tipp: Verwenden Sie die Eigenschaft fillStyle , um mit einer anderen Farbe/einem anderen Farbverlauf zu füllen.

Hinweis: Wenn der Pfad nicht geschlossen ist, fügt die Methode fill() eine Linie vom letzten Punkt zum Startpunkt des Pfads hinzu, um den Pfad zu schließen (wie closePath() ), und füllt dann den Pfad.

JavaScript-Syntax: Kontext .fill();

❮ HTML-Canvas-Referenz