Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mendapatkan Warna Piksel Di Bawah Tetikus pada Kanvas dalam JavaScript?
Mendapatkan Warna Pixel daripada Kanvas pada Mouse Move
Acara mousemove boleh digunakan untuk menjejaki kedudukan tetikus pengguna semasa ia bergerak ke atas. elemen kanvas. Dengan mendapatkan kedudukan tetikus berbanding dengan kanvas dan menggunakan kaedah getImageData(), adalah mungkin untuk mendapatkan semula nilai RGB piksel di bawah kursor tetikus.
Untuk mendapatkan warna piksel di bawah tetikus dalam JavaScript, ikuti langkah berikut:
Kod Contoh
Berikut ialah contoh lengkap yang menunjukkan cara mendapatkan warna piksel di bawah tetikus:
<code class="javascript">const canvas = document.getElementById('my-canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(0, 0, 100, 100); canvas.addEventListener('mousemove', (e) => { const x = e.offsetX; const y = e.offsetY; const pixelData = ctx.getImageData(x, y, 1, 1).data; const color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`; console.log(color); });</code>
Contoh ini akan log warna RGB piksel di bawah kursor tetikus ke konsol apabila tetikus bergerak di atas kanvas.
Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Warna Piksel Di Bawah Tetikus pada Kanvas dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!