Artikel ini cocok bagi pembaca yang tertarik dengan gambar kanvas, grafik, dan visualisasi front-end.
bajiSegala sesuatu mempunyai sebab.
Saat ini, produk perlu memiliki fungsi seperti itu: mewarnai beberapa gambar. Kalau dipikir-pikir, ini bukanlah sesuatu yang mudah. Saya sudah mempelajari teknologi pewarnaan grafis. Jadi saya mengirimkan dua algoritma yang saya tulis sebelumnya kepada teman saya dan memintanya untuk mengimplementasikannya sebagai referensi. Algoritma pertama adalah memanipulasi piksel, dan yang kedua menggunakan sintesis gambar: globalCompositeOperation.
Semuanya bisa menimbulkan kejutan, terutama saat menulis program.
Tidak lama kemudian, teman saya mengatakan bahwa algoritma kedua tidak berfungsi di Firefox.
Jelajahi alasannyaSaya terkejut ketika mendengar ada bug. Saya sudah mengujinya, dan saya juga sudah mengujinya di FireFox. Jadi saya membuka Firefox dan memulai contohnya, dan ternyata baik-baik saja dan tidak ada masalah.
Namun ada masalah dalam mengintegrasikan mitra kecil ke dalam produk. Apa bedanya? Setelah diselidiki bersama-sama, akhirnya saya menemukan bahwa salah satu perbedaan antara kode contoh saya dengan kode di produk adalah kode contoh menggunakan gambar png, sedangkan produk menggunakan gambar svg.
Mungkinkah ada masalah pada gambar svg? Mengambil gambar svg dan memasukkannya ke dalam kode contoh memang salah. Kesimpulannya sudah jelas:
Di bawah browser FireFox, saat menggambar gambar SVG di bawah Canvas, pengaturan globalCompositeOperation tidak akan berlaku.
Berikut ini adalah potongan kode untuk pengujian. ctx.globalCompositeOperation = 'destination-out' berarti menggunakan bentuk gambar sumber untuk melubangi gambar tujuan.
Di browser lain, kode berikut ini valid dan dilubangi. Tapi di
Tidak berfungsi di FireFox:
<html><head> <skrip> fungsi init() { var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); fungsi () { ctx.drawImage(img, 0, 0, img.lebar * 2, img.tinggi * 2); ctx.globalCompositeOperation = 'keluar tujuan'; } img.src = 'diffuse.png'; var svg = Gambar baru; svg.src = ./d.svg; function drawPoint(pointX, pointY) { ctx.drawImage(svg , pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener('klik', fungsi (e) { drawPoint(e.clientX, e.clientY); }, false); kepala><tubuh onload=init(); gaya=latar belakang: merah> <div> <id kanvas=c lebar=1000 tinggi=1000></kanvas> </div></tubuh></html> Bagaimana cara mengatasinyaPenyebab masalahnya sudah ditemukan, dan solusinya sebenarnya sederhana.
Hal ini sering kali terjadi, dan sering kali lebih sulit menemukan masalahnya daripada menyelesaikannya.
Solusinya sebenarnya sangat sederhana
Tambahkan penilaian pada kode untuk menentukan apakah browser tersebut adalah FireFox.
Jika ya, pertama-tama gambarkan gambar svg ke kanvas sementara.
Gambar selanjutnya menggunakan kanvas sementara untuk menggantikan gambar svg.
Misalnya kode di atas dapat diperbaiki sebagai berikut:
fungsi init() { var kanvas = document.getElementById('c'); var ctx = kanvas.getContext('2d'); , 0, 0, img.lebar * 2, img.tinggi * 2); 'tujuan-keluar'; } img.src = 'diffuse.png'; var svg = Gambar baru; svg.src = ./d.svg; var tempCanvas = svg; { tempCanvas = dokumen.createElement('kanvas'); tempCanvas.width = svg.lebar; pointY) { ctx.drawImage(tempCanvas, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener('klik', function (e) { drawPoint(e.clientX, e.clientY ); }, PALSU); }Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.