Memangkas imej kawasan menggunakan kaedah clip() dalam HTML5 Canvas API_html5 petua tutorial

Apabila menggunakan Kanvas untuk melukis imej, kami selalunya mahu menyimpan hanya sebahagian daripada imej Kami boleh menggunakan fungsi pemangkasan imej API kanvas untuk mencapai idea ini.
Fungsi pemangkasan imej Canvas API bermakna menggunakan laluan dalam kanvas, hanya imej kawasan yang terkandung dalam laluan akan dilukis dan imej di luar laluan tidak akan dilukis. Ini sedikit seperti topeng lapisan dalam Flash.

Gunakan kaedah clip() tanpa parameter konteks grafik untuk melaksanakan fungsi pemangkasan imej Kanvas. Kaedah ini menggunakan laluan untuk menetapkan kawasan keratan untuk Kanvas. Oleh itu, laluan mesti dibuat terlebih dahulu. Selepas penciptaan selesai, panggil kaedah clip() untuk menetapkan kawasan pemangkasan.
Perlu diingat bahawa pemotongan dilakukan pada kanvas Kanvas yang dipotong tidak boleh dipulihkan kepada saiz asalnya, yang bermaksud bahawa kanvas menjadi lebih kecil apabila ia dipotong Untuk memastikan bahawa ia masih boleh pada saiz asal oleh kanvas pada akhirnya Lukisan perlu memberi perhatian kepada save() dan restore(). Kanvas dipotong terlebih dahulu sebelum melukis. Ia tidak semestinya gambar, laluan juga boleh dimasukkan~

Mari kita lihat Demo yang mudah dahulu.

Kod JavaScriptSalin kandungan ke papan keratan

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

window.onload =

fungsi(){

var kanvas = document.getElementById("kanvas"); kanvas.lebar = 800;

kanvas.tinggi = 600;

var

konteks = canvas.getContext(

"2d"

); context.fillStyle = "#FFF"; context.fillRect(0,0,800,600);

//Lukis segi empat sama besar pada skrin

context.fillStyle =

"hitam"

;

context.fillRect(10,10,200,200); context.save();

context.beginPath();

//Potong kanvas dari titik (0, 0) ke petak (50, 50)

context.rect(0,0,50,50);

context.clip();

//Bulatan merah

context.beginPath();

context.strokeStyle =

"merah"

;

context.lineWidth = 5;

context.arc(100,100,100,0,Math.PI * 2,

salah

);

//Bulatan penuh

context.stroke();

context.closePath();

context.restore();

//Potong keseluruhan kanvas sekali lagi

context.beginPath();

context.rect(0,0,500,500);

context.clip();

//Lukis garis biru yang belum dipotong

context.beginPath();

context.strokeStyle =

"biru"

;

context.lineWidth = 5;

context.arc(100,100,50,0,Math.PI * 2,salah);

//Bulatan penuh

context.stroke();

context.closePath();

};

Hasil jalankan:

Menggunakan campuran kaedah save() dan restore(), kita boleh mengehadkan kawasan lukisan. Mula-mula, kita boleh menggunakan kaedah rect() untuk mengelilingi kawasan yang ingin kita lukis, dan kemudian gunakan kaedah clip() untuk memangkas kawasan tersebut.

Dengan cara ini, tidak kira apa operasi yang kami lakukan dalam konteks, hanya bahagian terhad akan dipaparkan. Dengan kata lain, fungsi clip() adalah untuk mengehadkan kawasan yang hendak dipaparkan. Apabila kita tidak lagi mahu mengehadkan kawasan itu, kita boleh menggunakan kaedah restore() untuk melompat keluar dan terus mengendalikan konteks asal.