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 Juli 2015.
Die CanvasRenderingContext2D.clip()-Methode der Canvas 2D API verwandelt den aktuellen oder angegebenen Pfad in die aktuelle Schnittregion. Die vorherige Schnittregion, falls vorhanden, wird mit dem aktuellen oder angegebenen Pfad geschnitten, um die neue Schnittregion zu erstellen.
Im Bild unten stellt die rote Umrandung eine Schnittregion dar, die wie ein Stern geformt ist. Nur die Teile des Schachbrettmusters, die sich innerhalb der Schnittregion befinden, werden gezeichnet.
Hinweis:
Beachten Sie, dass die Schnittregion nur aus Formen konstruiert wird, die dem Pfad hinzugefügt wurden. Es funktioniert nicht mit Formprimativen, die direkt auf die Leinwand gezeichnet werden, wie z.B. fillRect(). Stattdessen müssten Sie rect() verwenden, um eine rechteckige Form zum Pfad hinzuzufügen, bevor Sie clip() aufrufen.
Syntax
clip()
clip(path)
clip(fillRule)
clip(path, fillRule)
Parameter
Rückgabewert
Keiner (undefined).
Beispiele
Eine einfache Schnittregion
Dieses Beispiel verwendet die clip()-Methode, um eine Schnittregion entsprechend der Form eines kreisförmigen Bogens zu erstellen. Zwei Rechtecke werden dann gezeichnet; nur die Teile innerhalb der Schnittregion werden gerendert.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Schnittregion 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
Festlegen eines Pfades und eines fillRule
Dieses Beispiel speichert zwei Rechtecke in einem Path2D-Objekt, das dann mit der clip()-Methode zur aktuellen Schnittregion gemacht wird. Die "evenodd"-Regel erzeugt ein Loch, wo sich die Schnittrechtecke überschneiden; standardmäßig (mit der "nonzero"-Regel) gäbe es kein Loch.
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 Schnittregion
Dieses Beispiel verwendet zwei Pfade, ein Rechteck und ein Quadrat, um eine komplexe Schnittregion zu erstellen. Die clip()-Methode wird zweimal aufgerufen, zuerst um die aktuelle Schnittregion mit einem Path2D-Objekt auf den Kreis festzulegen, dann erneut, um die Kreis-Schnittregion mit einem Quadrat zu schneiden. Die endgültige Schnittregion ist eine Form, die die Schnittmenge des Kreises und des Quadrats darstellt.
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 # dom-context-2d-clip-dev |
Browser-Kompatibilität
Loading…
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D