Comment obtenir la couleur des pixels sous le curseur de la souris sur une toile ?

Obtention de la couleur des pixels à partir de Canvas sur Mousemove

Introduction

Obtention de la couleur précise des pixels en dessous le curseur de la souris sur un canevas peut être utile pour diverses applications, telles que l'édition d'images, les jeux basés sur les pixels ou les outils de sélection de couleurs. Cet article fournit un exemple complet qui vous permet d'accomplir cette tâche.

Étapes pour obtenir la couleur des pixels

1. Configuration initiale du canevas :

   • Créez un élément de canevas HTML et obtenez son contexte.
   • Facultativement, dessinez des formes ou des images sur le canevas à l'aide des fonctions API du canevas.

2. Gérer les mouvements de la souris :

   • Écoutez les événements de mouvement de la souris (mousemove) sur le canevas.
   • Dans le gestionnaire d'événements , calculez les coordonnées du curseur de la souris sur le canevas.

3. Obtenir les données d'image :

   • Utilisez getImageData( ) pour récupérer les données de pixels du canevas aux coordonnées spécifiées.
   • Cela renverra un tableau de valeurs représentant les composants de couleur (rouge, vert, bleu, alpha) pour le pixel sélectionné.

4. Extraire les valeurs RVB :

   • À partir du tableau récupéré, extrayez les valeurs des composants de couleur RVB (index 0-2).

5. Couleur d'affichage :

   • Convertissez les valeurs RVB dans un format convivial, tel qu'une chaîne hexadécimale ou RVB.
   • Affichez les informations sur la couleur des pixels dans une zone désignée de la page Web, comme une info-bulle ou une barre d'état.

Exemple de code :

Vous trouverez ci-dessous un exemple complet qui démontre les étapes décrites ci-dessus :

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

<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 rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const pixelData = ctx.getImageData(x, y, 1, 1).data;
  const colorInfo = `RGB: (${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`;
  document.getElementById('color-info').innerHTML = colorInfo;
});</code>

Dans cet exemple, le div color-info affichera les valeurs de couleur RVB du pixel sous le le curseur de la souris lorsqu'il se déplace sur le canevas.

Considérations supplémentaires

• Assurez-vous de prendre en compte la position correcte de la souris sur le canevas, en tenant compte des éventuels décalages du canevas. ou les marges.
• Si vous rencontrez des problèmes pour obtenir des données de pixels précises, vérifiez s'il existe des calques ou des effets appliqués au canevas qui pourraient affecter les résultats.
• Pour des applications plus avancées, vous devrez peut-être des fonctionnalités supplémentaires telles que la conversion des couleurs vers différents formats ou la gestion des opérations de transparence et de mélange.

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!