Canvas kesish
clip() metodi
clip() metodi joriy yo‘lni joriy kesish sohasiga (clipping region) aylantiradi.
Soha kesilgach, keyingi chizmalar faqat kesilgan soha ichida ko‘rinadi.
clip() metodi quyidagi parametrlarga ega:
| Parametr | Tavsif |
|---|---|
| fillrule | Nuqta kesish sohasining ichidami yoki tashqarisidami? Mumkin bo‘lgan qiymatlar: nonzero|evenodd |
| path | Kesish sohasi sifatida ishlatiladigan yo‘l |
Keling, bir nechta misolni ko‘rib chiqamiz:
Misol
Avval aylana shaklidagi kesish sohasini yarating. So‘ngra ikkita to‘rtburchak chizing; ularning faqat kesish sohasi ichida joylashgan qismlarigina ko‘rinadi:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create a circular clipping region
ctx.beginPath();
ctx.arc(100, 75, 70, 0, Math.PI * 2);
ctx.clip();
// Draw two rectangles
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 90, 90);
</script>
O‘zingiz sinab ko‘ring »
Misol
Avval uchburchak shaklidagi kesish sohasini yarating. So‘ngra ikkita to‘rtburchak chizing; ularning faqat kesish sohasi ichida joylashgan qismlarigina ko‘rinadi:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create a triangle-shaped clipping region
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.clip();
// Draw two rectangles
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 90, 90);
</script>
O‘zingiz sinab ko‘ring »
Misol
Avval aylana shaklidagi kesish sohasini yarating. So‘ngra canvas’ga rasm chizing; bu safar ham faqat kesish sohasi ichida joylashgan qismlargina ko‘rinadi:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
// Create a circular clipping region
ctx.beginPath();
ctx.arc(110, 145, 75, 0, Math.PI * 2);
ctx.clip();
// Draw image onto canvas
ctx.drawImage(image, 0, 0);
});
</script>
O‘zingiz sinab ko‘ring »
Misol
Avval ikkita to‘rtburchakni Path2D() obyektiga saqlaymiz — bu kesish sohasi bo‘ladi. "evenodd" qoidasi kesish to‘rtburchaklari kesishgan joyda teshik hosil qiladi. Agar standart "nonzero" qoidasidan foydalanganimizda, teshik bo‘lmas edi:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create clipping path (two rectangles)
let r = new Path2D();
r.rect(80,10, 45,130);
r.rect(40,50, 120,50);
ctx.clip(r, "evenodd");
// Draw a rectangle
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
</script>
O‘zingiz sinab ko‘ring »
Misol
Yuqoridagi misolning o‘zi, lekin "nonzero" qoidasi bilan (kesish to‘rtburchaklari kesishgan joyda teshik hosil qilmaydi):
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Create clipping path (two rectangles)
let r = new Path2D();
r.rect(80,10, 45,130);
r.rect(40,50, 120,50);
ctx.clip(r, "nonzero");
// Draw a rectangle
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
</script>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!