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.
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.
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
<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
<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
<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