Bagaimana untuk Mendapatkan Warna RGB Piksel Kanvas Di Bawah Kursor Tetikus?

Dapatkan warna piksel daripada kanvas pada gerakan tetikus

Mendapatkan nilai RGB piksel di bawah tetikus pada elemen kanvas adalah mungkin menggunakan getImageData () kaedah. Kaedah ini mengembalikan objek CanvasPixelArray yang mengandungi data piksel untuk kawasan segi empat tepat yang ditentukan.

Untuk mendapatkan nilai RGB piksel di bawah kursor tetikus, anda boleh menggunakan sifat clientX dan clientY bagi objek acara tetikus untuk menentukan kedudukan tetikus di atas kanvas. Anda kemudiannya boleh menggunakan koordinat ini untuk memanggil getImageData() pada konteks kanvas, melepasi lebar dan ketinggian kawasan 1x1 piksel di lokasi yang ditentukan. Tatasusunan yang dikembalikan akan mengandungi nilai RGB piksel.

Berikut ialah coretan kod contoh yang menunjukkan cara untuk mendapatkan warna piksel di bawah tetikus pada kanvas:

<code class="javascript">const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove', (e) =&gt; {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const pixelData = ctx.getImageData(x, y, 1, 1).data;

  console.log(`The pixel at (${x}, ${y}) has the following RGB color: ${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}`);
});</code>

Dalam contoh ini , pendengar acara mousemove dilampirkan pada elemen kanvas. Apabila tetikus bergerak di atas kanvas, pendengar acara dicetuskan dan sifat clientX dan clientY bagi objek acara digunakan untuk mengira koordinat tetikus pada kanvas. Kaedah getImageData() kemudian dipanggil dengan koordinat ini untuk mendapatkan semula data piksel untuk wilayah yang ditentukan. Akhir sekali, data piksel dilog ke konsol.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Warna RGB Piksel Kanvas Di Bawah Kursor Tetikus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!