Operasi Komposit global kanvas

Secara default, jika suatu objek (sumber) digambar di atas objek lain (target) di Canvas, browser hanya akan melapisi gambar objek sumber di atas gambar objek target.

Sederhananya, di Canvas, dengan menggabungkan sumber gambar dan gambar target melalui operasi globalCompositeOperation di Canvas, Anda bisa mendapatkan efek yang berbeda, seperti gambar berikut:

Seperti terlihat pada gambar di atas, apel merah dan lingkaran hitam berubah menjadi apel merah yang tergigit melalui destination-out globalCompositeOperation . Dengan kata lain, melalui sintesis gambar di Canvas, kita dapat memperoleh beberapa efek unik, seperti kita ingin membuat efek lotere kartu awal. Hari ini kita akan mempelajari cara menggunakan sintesis gambar di Canvas.

Ada total 26 jenis nilai untuk atribut globalCompositeOperation di Canvas. Setiap jenis akan menghasilkan efek yang berbeda. Tentu saja, Anda mungkin melihat bahwa efeknya akan berbeda, dan beberapa efek mungkin tidak ditampilkan secara normal di browser. Tapi tak jadi soal, mari kita pahami saja pengertian dan dampak dari 26 jenis tersebut.

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'merah'; ctx.beginPath(); 2, benar); ctx.closePath(); ctx.isi();

Kode di atas akan menggambar lingkaran merah dengan radius 80px pada kanvas Canvas, yang disebut sumber gambar di sini.

 ctx.fillStyle = 'oranye'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, benar); ();

Kode ini akan menggambar lingkaran oranye dengan radius 80px pada kanvas Canvas, yang di sini disebut target gambar. Dengan menetapkan nilai globalCompositeOperation antara sumber gambar dan gambar target, operasi sintesis gambar dapat diselesaikan:

 ctx.save(); ctx.translate(w / 2, h / 2); ctx.fillStyle = 'merah'; ctx.beginPath(); 2, benar); ctx.closePath(); ctx.fill(); 'sumber-dalam'; ctx.fillStyle = 'oranye'; ctx.beginPath(); ctx.arc(40, 20, 80, 0, Math.PI * 2, benar); (); ctx.restore();

Efek yang didapat saat ini adalah sebagai berikut:

source-over adalah nilai default properti globalCompositeOperation . Grafik sumber menutupi grafik target. Grafik sumber ditampilkan di bagian buram grafik sumber, dan grafik target ditampilkan di bagian lainnya.

source-in : Hanya bagian grafik target dan grafik sumber yang tumpang tindih dan buram yang digambar.

source-out : Bagian grafik target dan grafik sumber yang tidak tumpang tindih akan digambar.

source-atop : Grafik target di bagian konten grafik target dan grafik sumber yang tumpang tindih akan digambar.

destination-over : Grafik tujuan di belakang grafik tujuan dan konten grafik sumber akan digambar.

destination-in : Bagian yang tumpang tindih dari grafik tujuan dan grafik sumber akan dipertahankan (grafik sumber), dan sisanya akan ditampilkan secara transparan

Yang lainnya tidak akan ditampilkan satu per satu. Deskripsi spesifik yang terkait dengan setiap nilai dapat ditemukan di sini.

Ada dua properti globalAlpha dan globalCompositeOperation di Canvas untuk mengontrol operasi sintesis gambar:

• globalAlpha : Mengatur transparansi gambar. Properti globalAlpha defaultnya adalah 1 , yang menunjukkan opacity penuh, dan dapat diatur dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya buram). Nilai ini harus ditetapkan sebelum grafik digambar
• globalCompositeOperation : Nilai atribut ini mengontrol gambar grafik dalam bitmap Canvas saat ini setelah globalAlpha dan semua transformasi diterapkan.

Dalam bisnis kita sehari-hari, kita sering melihat efek lotere seperti kartu gores. Jika kami menggunakan Canvas untuk melakukannya, kami akan menggunakan sintesis gambar Canvas.

 <div id=card> <kanvas id=canvasOne lebar=500 tinggi=300></canvas> </div>

Kami menampilkan hadiah (jika berupa gambar) sebagai latar belakang div#card . Kemudian pertama-tama gambarlah persegi panjang abu-abu (gambar sumber) di Canvas, lalu secara dinamis gambar gambar baru melalui peristiwa mouse (atau peristiwa sentuh) (ini mirip dengan kuas), dan tetapkan nilai atribut globalCompositeOperation ke destination-out (baru draw Bagian grafis yang tidak tumpang tindih dan konten grafis yang sudah ada di kanvas target akan dipertahankan). Ketika penghapusan kuas lebih besar dari proporsi tertentu, hapus elemen <canvas> atau gunakan clearRect() untuk menghapus kanvas Canvas. untuk menampilkan latar belakang div

Pada artikel ini, kami terutama memperkenalkan sintesis gambar Canvas. Di Canvas, operasi sintesis gambar dapat dikontrol melalui dua atribut, globalAlpha dan globalCompositeOperation, untuk mencapai efek sintesis gambar. Saya berharap ini dapat membantu pembelajaran semua orang, dan saya juga berharap semua orang mendukung Jaringan VeVb Wulin.