tutorial pengembangan web terbaru
 

HTML canvas clip() Method

<Canvas Object

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:

YourbrowserdoesnotsupporttheHTML5canvastag.

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