Wie bekomme ich die Pixelfarbe von einer Leinwand mit Mousemove?

Pixelfarbe von Canvas bei Mousemove abrufen

Übersicht

In diesem Beitrag wird untersucht, wie Sie die RGB-Werte des Pixels unter dem Mauszeiger abrufen können, während Bewegen über ein Leinwandelement. Einen umfassenden Ansatz liefern wir mit einem eigenständigen Beispiel.

Lösung

Um dies zu erreichen, erstellen Sie zunächst eine Leinwand mit den gewünschten Maßen:

<code class="html"><canvas id="example" width="200" height="60"></canvas></code>

Füllung die Leinwand mit Elementen wie Quadraten:

<code class="js">const example = document.getElementById('example');
const ctx = example.getContext('2d');

ctx.fillStyle = randomColor();
ctx.fillRect(0, 0, 50, 50);

ctx.fillStyle = randomColor();
ctx.fillRect(55, 0, 50, 50);

ctx.fillStyle = randomColor();
ctx.fillRect(110, 0, 50, 50);</code>

Schließlich fügen Sie den Mousemove-Ereignishandler hinzu, der die Pixelwerte an der Position des Cursors erfasst:

<code class="js">$('#example').mousemove(function(e) {
  // Calculate the position relative to the canvas
  const pos = findPos(this);
  const x = e.pageX - pos.x;
  const y = e.pageY - pos.y;
  const coord = `x=${x}, y=${y}`;

  // Get the pixel value
  const c = this.getContext('2d');
  const p = c.getImageData(x, y, 1, 1).data;

  // Convert to hex format
  const hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);

  // Display the color information
  $('#status').html(coord + "<br>" + hex);
});</code>

Hilfsfunktionen

Dieser Code basiert auf unterstützenden Funktionen zum Ermitteln der Position des Elements und zum Konvertieren von RGB-Werten in Hexadezimalwerte. Definieren Sie diese Funktionen wie folgt:

<code class="js">function findPos(obj) {
  let curleft = 0, curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return { x: curleft, y: curtop };
  }
  return undefined;
}

function rgbToHex(r, g, b) {
  if (r > 255 || g > 255 || b > 255) throw "Invalid color component";

  return ((r << 16) | (g << 8) | b).toString(16);
}

function randomInt(max) {
  return Math.floor(Math.random() * max);
}

function randomColor() {
  return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`;
}</code>

Live-Beispiel

Besuchen Sie den folgenden Link, um das vollständige Beispiel in Aktion zu sehen:

https://bl.ocks.org /wayneburkett/ca41a5245a9f48766b7bc881448f9203

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