Metode HTML canvas clip()
Definisi dan penggunaan
clip() Metode ini meng剪切原始画布上的任意形状和尺寸。
Pemberitahuan:Sekali area disunting, semua gambar setelahnya akan ditangkap di dalam area yang disunting (tidak dapat mengakses area lain di atas kanvas). Anda juga dapat menyimpan area kanvas saat ini sebelum menggunakan metode clip() dengan menggunakan metode save(), dan dapat memulihkannya kapan saja nanti (dengan menggunakan metode restore()).
Contoh
Potong area persegi panjang 200*120 pixel dari kanvas. Lalu, gambar persegi panjang hijau. Hanya bagian persegi panjang hijau dalam area yang dipotong yang dapat dilihat:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Menyunting area persegi
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Menggambar persegi emas setelah clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Sintaksis
context.clip();
Dukungan browser
Angka di tabel menunjukkan versi browser pertama yang mendukung atribut 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 sebelumnya tidak mendukung elemen <canvas>.
