Maison > Article > interface Web > 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
Configuration initiale du canevas :
Gérer les mouvements de la souris :
Obtenir les données d'image :
Extraire les valeurs RVB :
Couleur d'affichage :
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
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!