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:

1. Dapatkan konteks kanvas: Dapatkan konteks pemaparan 2D (permukaan lukisan) elemen kanvas menggunakan getContext('2d').
2. Dengar acara mousemove: Tambah pendengar acara mousemove pada elemen kanvas.
3. Dapatkan kedudukan tetikus: Di dalam pengendali acara mousemove, dapatkan kedudukan kursor tetikus berbanding dengan kanvas menggunakan e.offsetX dan e.offsetY.
4. Dapatkan warna piksel: Gunakan getImageData(x, y, 1, 1) untuk mendapatkan data imej bagi lokasi piksel yang ditentukan dan simpan hasilnya dalam pembolehubah.
5. Hilangkan warna piksel: Kaedah getImageData() mengembalikan tatasusunan empat nilai, mewakili merah, hijau, biru dan alfa saluran piksel.

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!