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 gegebenen Pfad in die aktuelle Abschneideregion. Die vorherige Abschneideregion, falls vorhanden, wird mit dem aktuellen oder gegebenen Pfad geschnitten, um die neue Abschneideregion zu erstellen.
Im Bild unten stellt die rote Umrandung eine Abschneideregion in Form eines Sterns dar. Nur die Teile des Schachbrettmusters, die sich innerhalb der Abschneideregion befinden, werden gezeichnet.
Hinweis:
Beachten Sie, dass die Abschneideregion nur aus Formen konstruiert wird, die dem Pfad hinzugefügt wurden. Es funktioniert nicht mit Formprimitiven, die direkt auf die Leinwand gezeichnet werden, wie z.B. fillRect().
Stattdessen müssten Sie rect() verwenden, um eine rechteckige Form zu dem Pfad hinzuzufügen, bevor Sie clip() aufrufen.
Syntax
clip()
clip(path)
clip(fillRule)
clip(path, fillRule)
Parameter
Rückgabewert
Keiner (undefined).
Beispiele
Eine einfache Abschneideregion
Dieses Beispiel verwendet die clip()-Methode, um eine Abschneideregion entsprechend der Form eines kreisförmigen Bogens zu erstellen. Zwei Rechtecke werden dann gezeichnet; nur die Teile innerhalb der Abschneideregion werden gerendert.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Abschneideregion ist ein vollständiger 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 einer fillRule
In diesem Beispiel werden zwei Rechtecke in einem Path2D-Objekt gespeichert, das dann mit der clip()-Methode zur aktuellen Abschneideregion gemacht wird. Die "evenodd"-Regel erzeugt ein Loch, wo sich die Abschneiderechtecke schneiden; 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 Abschneideregion
Dieses Beispiel verwendet zwei Pfade, einen Kreis und ein Quadrat, um eine komplexe Abschneideregion zu erstellen. Die clip()-Methode wird zweimal aufgerufen, zuerst um die aktuelle Abschneideregion auf den Kreis mit einem Path2D-Objekt zu setzen, dann erneut, um die Kreisschnittregion mit einem Quadrat zu schneiden. Die endgültige Abschneideregion 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
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D