Heim > Artikel > Web-Frontend > Wie erhalte ich die Pixelfarbe unter dem Mauszeiger auf einer Leinwand?
Pixelfarbe von der Leinwand bei Mausbewegung abrufen
Einführung
Ermitteln der genauen Pixelfarbe darunter Der Mauszeiger auf einer Leinwand kann für verschiedene Anwendungen nützlich sein, beispielsweise für die Bildbearbeitung, pixelbasierte Spiele oder Farbauswahltools. Dieser Artikel enthält ein umfassendes Beispiel, mit dem Sie diese Aufgabe bewältigen können.
Schritte zum Erhalten der Pixelfarbe
Ersteinrichtung der Leinwand :
Mausbewegungen verarbeiten:
Bilddaten abrufen:
RGB-Werte extrahieren:
Anzeigefarbe:
Beispielcode:
Unten finden Sie ein vollständiges Beispiel, das die oben beschriebenen Schritte demonstriert:
<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>
In diesem Beispiel zeigt das Farbinfo-Div die RGB-Farbwerte des Pixels unter dem an Mauszeiger, während er sich über die Leinwand bewegt.
Zusätzliche Überlegungen
Das obige ist der detaillierte Inhalt vonWie erhalte ich die Pixelfarbe unter dem Mauszeiger auf einer Leinwand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!