Comment obtenir la couleur RVB d'un pixel de toile sous le curseur de la souris ?

Obtenir la couleur des pixels du canevas lors du déplacement de la souris

Obtenir la valeur RVB d'un pixel sous la souris sur un élément du canevas est possible en utilisant getImageData () méthode. Cette méthode renvoie un objet CanvasPixelArray contenant les données de pixel pour la région rectangulaire spécifiée.

Pour obtenir la valeur RVB du pixel sous le curseur de la souris, vous pouvez utiliser les propriétés clientX et clientY de l'objet événement de la souris pour déterminer la position de la souris sur la toile. Vous pouvez ensuite utiliser ces coordonnées pour appeler getImageData() sur le contexte du canevas, en transmettant la largeur et la hauteur d'une région de 1x1 pixel à l'emplacement spécifié. Le tableau renvoyé contiendra les valeurs RVB du pixel.

Voici un exemple d'extrait de code qui montre comment obtenir la couleur du pixel sous la souris sur un canevas :

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

canvas.addEventListener('mousemove', (e) => {
  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>

Dans cet exemple , l'écouteur d'événement mousemove est attaché à l'élément canvas. Lorsque la souris se déplace sur le canevas, l'écouteur d'événements est déclenché et les propriétés clientX et clientY de l'objet événement sont utilisées pour calculer les coordonnées de la souris sur le canevas. La méthode getImageData() est ensuite appelée avec ces coordonnées pour récupérer les données de pixels pour la région spécifiée. Enfin, les données de pixels sont enregistrées sur la console.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!