Wie erhalte ich die RGB-Farbe eines Canvas-Pixels unter dem Mauszeiger?

Pixelfarbe von der Leinwand bei Mausbewegung abrufen

Mit getImageData ist es möglich, den RGB-Wert eines Pixels unter der Maus auf einem Leinwandelement abzurufen ()-Methode. Diese Methode gibt ein CanvasPixelArray-Objekt zurück, das die Pixeldaten für den angegebenen rechteckigen Bereich enthält.

Um den RGB-Wert des Pixels unter dem Mauszeiger zu erhalten, können Sie die Eigenschaften clientX und clientY des Mausereignisobjekts zur Bestimmung verwenden die Position der Maus auf der Leinwand. Anschließend können Sie diese Koordinaten verwenden, um getImageData() im Canvas-Kontext aufzurufen und dabei die Breite und Höhe eines 1x1-Pixel-Bereichs an der angegebenen Position zu übergeben. Das zurückgegebene Array enthält die RGB-Werte des Pixels.

Hier ist ein Beispiel-Codeausschnitt, der zeigt, wie man die Pixelfarbe unter der Maus auf einer Leinwand erhält:

<code class="javascript">const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

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;

  console.log(`The pixel at (${x}, ${y}) has the following RGB color: ${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}`);
});</code>

In diesem Beispiel , wird der Mousemove-Ereignis-Listener an das Canvas-Element angehängt. Wenn sich die Maus über die Leinwand bewegt, wird der Ereignis-Listener ausgelöst und die Eigenschaften clientX und clientY des Ereignisobjekts werden verwendet, um die Koordinaten der Maus auf der Leinwand zu berechnen. Anschließend wird die Methode getImageData() mit diesen Koordinaten aufgerufen, um die Pixeldaten für die angegebene Region abzurufen. Abschließend werden die Pixeldaten in der Konsole protokolliert.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die RGB-Farbe eines Canvas-Pixels unter dem Mauszeiger?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!