Bagaimana untuk Mendapatkan Nilai RGB Piksel Di Bawah Tetikus pada Kanvas?

Mendapatkan semula Warna Piksel di bawah Tetikus pada Kanvas Menggunakan Mousemove

Dalam aplikasi web, selalunya berguna untuk mendapatkan nilai RGB piksel secara terus di bawah kursor tetikus apabila ia berinteraksi dengan elemen kanvas. Begini cara untuk mencapai ini dalam JavaScript:

Contoh:

Pertimbangkan kod HTML ini:

<code class="html"><canvas id="canvas" width="200" height="200"></canvas>
<div id="color-value"></div></code>

Dan kod JavaScript berikut:

<code class="js">const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// Set up an image on the canvas
const img = new Image();
img.src = "path/to/image.jpg";

img.onload = function() {
  context.drawImage(img, 0, 0);
};

// Add event listener for mouse movement
canvas.addEventListener("mousemove", (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  const pixelData = context.getImageData(x, y, 1, 1).data;
  const r = pixelData[0];
  const g = pixelData[1];
  const b = pixelData[2];
  
  document.getElementById("color-value").innerHTML = `RGB: ${r}, ${g}, ${b}`;
});</code>

Dalam contoh ini, kaedah drawImage digunakan untuk memaparkan imej pada kanvas. Apabila tetikus bergerak di atas kanvas, pendengar peristiwa mousemove menangkap kedudukan tetikus semasa dan mengira koordinat piksel dalam kanvas menggunakan fungsi getBoundingClientRect. Ia kemudian mendapatkan semula data piksel menggunakan kaedah getImageData dan memaparkan nilai RGB dalam div nilai warna.

Nota Tambahan:

• Susun atur pixelData dikembalikan oleh getImageData mengandungi empat nilai: merah, hijau, biru dan alfa (transparensi).
• Pendengar acara boleh diubah suai untuk melakukan tindakan lain, seperti memberikan petua alat atau mengemas kini elemen UI.
• Teknik ini boleh diperluaskan untuk berfungsi dengan kandungan dinamik pada kanvas, seperti bentuk yang dilukis atau objek bergerak.

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