clip()
Canvas clip() metodi
Misol
Kontekstdan 200*120 pikselli hududni qirqib oling. So‘ngra qizil to‘rtburchak chizing. Qizil to‘rtburchakning faqat qirqilgan hudud ichidagi qismi ko‘rinadi:
clip() ishlatilmaganda:
clip() ishlatilganda:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
</script>
O‘zingiz sinab ko‘ring »
Tavsif
clip() metodi asl kontekstdan istalgan o‘lchamdagi hududni qirqib oladi.
Eslatma
Hudud qirqib olingandan so‘ng, keyingi barcha chizishlar qirqilgan hudud bilan cheklanadi.
Biroq clip() metodidan foydalanishdan oldin save() metodi yordamida kontekst sozlamalarini saqlab qo‘yishingiz va keyinroq ularni restore() yordamida tiklashingiz mumkin.
Sintaksis
| context.clip(); |
Parametrlar
| YO‘Q |
Qaytariladigan qiymat
| YO‘Q |
Brauzerlarda qo‘llab-quvvatlash
<canvas> elementi HTML5 standartidir (2014).
clip() barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 9-11 |
❮ Canvas ma’lumotnomasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!