[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.clip()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

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

Przykłady:

<script>

 window.onload = () => {
 
 const szer = 600;
 const wys = 500;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 // Ścieżka przycinająca
 let region = new Path2D();
 region.rect(0, 15, 400, 300);
 region.rect(120, 100, 300, 150);
 region.rect(220, 200, 350, 250);
 ctx.clip(region, "evenodd");

 // rzeczy, które zostaną przycięte
 ctx.fillStyle = "green";
 ctx.fillRect(0, 0, canvas.width, canvas.height);

 };

</script>
 
<canvas id="canvas" width="1" height="1"></canvas>

<script>

 window.onload = () => {
 
 const szer = 600;
 const wys = 500;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 // region przycinania
 ctx.beginPath();
 ctx.arc(250, 200, 150, 0, Math.PI * 2);
 ctx.clip();

 // rysunki
 ctx.fillStyle = "green";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 ctx.fillStyle = "orange";
 ctx.fillRect(50, 50, 250, 250);

 };

</script>
 
<canvas id="canvas" width="1" height="1"></canvas>

<script>

 window.onload = () => {
 
 const szer = 600;
 const wys = 500;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 // zapisać stan płótna za pomocą przed wywołaniem clip()
 ctx.save();

 // Utwórz dwie ścieżki przycinające
 let circlePath = new Path2D();
 circlePath.arc(120, 175, 90, 0, 2 * Math.PI);
 let squarePath = new Path2D();
 squarePath.rect(50, 110, 150, 150);

 // Ustaw klips na okręgu
 ctx.clip(circlePath);

 // Ustaw klip tak, aby był przecięciem koła i kwadratu
 ctx.clip(squarePath);

 // Narysuj rzeczy, które zostaną przycięte
 ctx.fillStyle = "green";
 ctx.fillRect(0, 0, canvas.width, canvas.height);

 // przywrócić płótno po zakończeniu rysowania clip()
 ctx.restore();

 ctx.fillStyle = "yellow";
 ctx.fillRect(180, 100, canvas.width, canvas.height);

 };

</script>
 
<canvas id="canvas" width="1" height="1"></canvas>

Opis:
Metoda CanvasRenderingContext2D.clip() zamienia bieżącą lub podaną ścieżkę w bieżący region przycinania. Poprzedni obszar przycinania, jeśli istnieje, jest przecinany z bieżącą lub zadaną ścieżką, aby utworzyć nowy obszar przycinania. Parametry fillRule - algorytm określający, czy punkt znajduje się wewnątrz, czy na zewnątrz obszaru przycinania, możliwa wartość: nonzero - niezerowa reguła nawijania, domyślna reguła, evenodd - parzysta i nieparzysta zasada kręta, path - ścieżka Path2D do użycia jako region przycinania.

Zobacz też:
fillRect() -
Path2D -
rect() -
restore() -
save() -