Contoh
Klip dari wilayah persegi panjang dari 200 * 120 pixel dari kanvas. Kemudian, menggambar persegi panjang merah. Hanya bagian dari persegi panjang merah yang di dalam area terpotong terlihat:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.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> Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| clip() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
The clip() metode klip wilayah dari setiap bentuk dan ukuran dari kanvas asli.
Tip: Setelah daerah terpotong, semua gambar masa mendatang akan terbatas pada wilayah terpotong (no access to other regions on the canvas) . Namun Anda dapat menyimpan wilayah kanvas saat menggunakan save() metode sebelum menggunakan clip() metode, dan mengembalikannya (with the restore() metode) setiap waktu di masa depan.
| sintaks JavaScript: | context . clip() ; |
|---|
<Canvas Object