Comment obtenir la couleur des pixels sous la souris sur une toile en JavaScript ?

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

L'événement mousemove peut être utilisé pour suivre la position de la souris de l'utilisateur lors de son déplacement un élément de canevas. En obtenant la position de la souris par rapport au canevas et en utilisant la méthode getImageData(), il est possible de récupérer les valeurs RVB du pixel sous le curseur de la souris.

Pour obtenir la couleur du pixel sous la souris en JavaScript, suivez ces étapes :

1. Obtenez le contexte du canevas : Obtenez le contexte de rendu 2D (une surface de dessin) de l'élément canevas à l'aide de getContext('2d').
2. Écoutez les événements mousemove : Ajoutez un écouteur d'événement mousemove à l'élément canvas.
3. Obtenez la position de la souris : Dans le gestionnaire d'événements mousemove, obtenez la position du curseur de la souris par rapport au canevas en utilisant e.offsetX et e.offsetY.
4. Obtenez la couleur du pixel : Utilisez getImageData(x, y, 1, 1) pour obtenir les données d'image pour le emplacement de pixel spécifié et stockez le résultat dans une variable.
5. Analysez la couleur du pixel : La méthode getImageData() renvoie un tableau de quatre valeurs, représentant le rouge, le vert, le bleu et l'alpha. canaux du pixel.

Exemple de code

Voici un exemple complet qui montre comment obtenir la couleur du pixel sous la souris :

<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>

Cet exemple enregistrera la couleur RVB du pixel sous le curseur de la souris sur la console lorsque la souris se déplace sur le canevas.

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!