Metode Canvas clip()
Definisi dan penggunaan
clip() Metode dapat memotong bentuk dan ukuran yang berbeda dari kanvas asli.
Petunjuk:Sekali area disecut, semua gambaran yang akan datang akan dihadirkan di dalam area yang disecut (tidak dapat mengakses area lain di kanvas). Anda juga dapat menyimpan area kanvas saat ini dengan menggunakan metode save() dan memulihkannya kapan saja nanti melalui metode restore().
Contoh
Memotong area segiempat 200*120 pixel dari kanvas. Lalu, mengegam segiempat berwarna hijau. Hanya bagian segiempat berwarna hijau yang dipotong yang dapat terlihat:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Memotong area segiempat
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Menyertakan segiempat persegi berwarna hijau setelah clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Sintaks
context.clip();
Dukungan Browser
Angka di tabel menunjukkan versi browser pertama yang mendukung sifat ini penuh.
| 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>.
