CanvasRenderingContext2D: fill()-Methode

Syntax

fill()
fill(path)
fill(fillRule)
fill(path, fillRule)

Parameter

fillRule

Der Algorithmus, um zu bestimmen, ob ein Punkt innerhalb oder außerhalb der Füllregion liegt. Mögliche Werte:

nonzero

Die non-zero winding rule. Standardregel.

evenodd

Die even-odd winding rule.

path

Ein Path2D-Pfad, der gefüllt werden soll.

Rückgabewert

Keiner (undefined).

Beispiele

Ein Rechteck füllen

Dieses Beispiel füllt ein Rechteck mit der fill()-Methode.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.rect(10, 10, 150, 100);
ctx.fill();

Ergebnis

Einen Pfad und ein fillRule angeben

In diesem Beispiel werden einige sich schneidende Linien in einem Path2D-Objekt gespeichert. Die fill()-Methode wird dann verwendet, um das Objekt auf die Leinwand zu rendern. In der Mitte des Objekts bleibt ein Loch ungefüllt, indem die Regel "evenodd" verwendet wird; standardmäßig (mit der "nonzero"-Regel) würde das Loch ebenfalls gefüllt werden.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create path
let region = new Path2D();
region.moveTo(30, 90);
region.lineTo(110, 20);
region.lineTo(240, 130);
region.lineTo(60, 130);
region.lineTo(190, 20);
region.lineTo(270, 90);
region.closePath();

// Fill path
ctx.fillStyle = "green";
ctx.fill(region, "evenodd");

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Schnittstelle, die diese Methode definiert: CanvasRenderingContext2D
• CanvasRenderingContext2D.fillStyle