Kaedah HTML canvas clip()
Definisi dan penggunaan
clip() Kaedah memotong sebarang bentuk dan saiz daripada kanvas asal.
Pemberitahuan:Setelah memotong kawasan sebarang, semua pengerjaan lukisan akan dihadkan ke kawasan yang dipotong (tidak boleh mengakses kawasan lain di atas canvas). Anda juga boleh menyimpan kawasan canvas semasa ini dengan menggunakan kaedah save() dan dapat pulihkannya nanti (dengan kaedah restore()).
Contoh
Potong kawasan persegi 200*120 piksel daripada canvas. kemudian, lukis persegi hijau. Hanya bahagian persegi hijau dalam kawasan yang dipotong yang dapat dilihat:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Memotong kawasan kotak
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Mengejar kotak hijau selepas clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Syarat
context.clip();
Dukungan pereka
Angka dalam tabel menunjukkan versi paling awal penggunaan browser yang menyokong sifat ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Keterangan:Internet Explorer 8 dan versi lebih awal tidak mendukung elemen <canvas>.
