Wie bekomme ich die Pixelfarbe unter der Maus auf einer Leinwand in JavaScript?

Pixelfarbe von der Leinwand bei Mausbewegung abrufen

Das Mousemove-Ereignis kann verwendet werden, um die Position der Maus des Benutzers zu verfolgen, während sie sich darüber bewegt ein Canvas-Element. Indem Sie die Mausposition relativ zur Leinwand ermitteln und die Methode getImageData() verwenden, ist es möglich, die RGB-Werte des Pixels unter dem Mauszeiger abzurufen.

Um die Pixelfarbe unter der Maus in JavaScript zu erhalten, gehen Sie wie folgt vor Diese Schritte:

1. Den Canvas-Kontext abrufen:Den 2D-Rendering-Kontext (eine Zeichenoberfläche) des Canvas-Elements mit getContext('2d') abrufen.
2. Auf Mousemove-Ereignisse warten: Fügen Sie dem Canvas-Element einen Mousemove-Ereignis-Listener hinzu.
3. Ermitteln Sie die Mausposition: Rufen Sie im Mousemove-Ereignishandler die Position des ab Mauszeiger relativ zur Leinwand mit e.offsetX und e.offsetY.
4. Pixelfarbe abrufen: Verwenden Sie getImageData(x, y, 1, 1), um die Bilddaten für zu erhalten Geben Sie die angegebene Pixelposition an und speichern Sie das Ergebnis in einer Variablen.
5. Pixelfarbe analysieren: Die getImageData()-Methode gibt ein Array mit vier Werten zurück, die Rot, Grün, Blau und Alpha darstellen Kanäle des Pixels.

Beispielcode

Hier ist ein vollständiges Beispiel, das zeigt, wie man die Pixelfarbe unter die Maus bekommt:

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

In diesem Beispiel wird die RGB-Farbe des Pixels unter dem Mauszeiger in der Konsole protokolliert, wenn sich die Maus über die Leinwand bewegt.

Das obige ist der detaillierte Inhalt vonWie bekomme ich die Pixelfarbe unter der Maus auf einer Leinwand in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!