CanvasRenderingContext2D: clip() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CanvasRenderingContext2D.clip()-Methode der Canvas 2D API verwandelt den aktuellen oder gegebenen Pfad in die aktuelle Clipping-Region. Die vorherige Clipping-Region, falls vorhanden, wird mit dem aktuellen oder gegebenen Pfad geschnitten, um die neue Clipping-Region zu erstellen.

Im Bild unten stellt die rote Umrandung eine Clipping-Region in Form eines Sterns dar. Nur die Teile des Schachbrettmusters, die innerhalb der Clipping-Region liegen, werden gezeichnet.

Sternförmige Clipping-Region

Hinweis: Beachten Sie, dass die Clipping-Region nur aus Formen erstellt wird, die dem Pfad hinzugefügt wurden. Sie funktioniert nicht mit Formen, die direkt auf die Leinwand gezeichnet werden, wie fillRect(). Stattdessen müssen Sie rect() verwenden, um eine rechteckige Form dem Pfad hinzuzufügen, bevor Sie clip() aufrufen.

Hinweis: Clip-Pfade können nicht direkt rückgängig gemacht werden. Sie müssen den Canvas-Zustand mit save() speichern, bevor Sie clip() aufrufen, und ihn wiederherstellen, sobald Sie mit dem Zeichnen im ausgeschnittenen Bereich fertig sind, indem Sie restore() verwenden.

Syntax

clip()
clip(path)
clip(fillRule)
clip(path, fillRule)

Parameter

fillRule

Der Algorithmus, mit dem bestimmt wird, ob ein Punkt innerhalb oder außerhalb der Clipping-Region liegt. Mögliche Werte:

nonzero: Die Nicht-Null-Winde-Regel. Standardregel.
evenodd: Die Even-Odd-Regel.

path

Ein Path2D-Pfad, der als Clipping-Region verwendet wird.

Rückgabewert

Keiner (undefined).

Beispiele

Eine einfache Clipping-Region

Dieses Beispiel verwendet die clip()-Methode, um eine Clipping-Region entsprechend der Form eines Kreisbogen zu erstellen. Zwei Rechtecke werden dann gezeichnet; nur die Teile innerhalb der Clipping-Region werden gerendert.

HTML

html

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

JavaScript

Die Clipping-Region ist ein voller Kreis mit seinem Zentrum bei (100, 75) und einem Radius von 50.

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

// Create circular clipping region
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.clip();

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, 100, 100);

Ergebnis

Spezifizieren eines Pfads und eines fillRule

Dieses Beispiel speichert zwei Rechtecke in einem Path2D-Objekt, das dann mit der clip()-Methode zur aktuellen Clipping-Region gemacht wird. Die "evenodd"-Regel erzeugt ein Loch, wo sich die Clipping-Rechtecke überschneiden; standardmäßig (mit der "nonzero"-Regel) gäbe es kein Loch.

HTML

html

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

JavaScript

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

// Create clipping path
let region = new Path2D();
region.rect(80, 10, 20, 130);
region.rect(40, 50, 100, 50);
ctx.clip(region, "evenodd");

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

Ergebnis

Erstellen einer komplexen Clipping-Region

Dieses Beispiel verwendet zwei Pfade, ein Rechteck und ein Quadrat, um eine komplexe Clipping-Region zu erstellen. Die clip()-Methode wird zweimal aufgerufen, zuerst um die aktuelle Clipping-Region auf den Kreis mit einem Path2D-Objekt festzulegen und dann erneut, um die Kreis-Clipping-Region mit einem Quadrat zu schneiden. Die endgültige Clipping-Region ist eine Form, die die Schnittmenge des Kreises und des Quadrats darstellt.

HTML

html

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

JavaScript

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

// Create two clipping paths
let circlePath = new Path2D();
circlePath.arc(150, 75, 75, 0, 2 * Math.PI);
let squarePath = new Path2D();
squarePath.rect(85, 10, 130, 130);

// Set the clip to the circle
ctx.clip(circlePath);
// Set the clip to be the intersection of the circle and the square
ctx.clip(squarePath);

// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

Ergebnis

Spezifikationen

Specification
HTML Standard # dom-context-2d-clip-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Das Interface, das diese Methode definiert: CanvasRenderingContext2D