Bagaimana untuk Mendapatkan Warna Piksel daripada Kanvas pada Mousemove?

Dapatkan Warna Piksel daripada Kanvas pada Mousemove

Ikhtisar

Siaran ini meneroka cara anda boleh mendapatkan semula nilai RGB piksel di bawah kursor tetikus semasa bergerak di atas elemen kanvas. Kami akan menyediakan pendekatan komprehensif dengan contoh serba lengkap.

Penyelesaian

Untuk mencapai matlamat ini, mula-mula buat kanvas dengan dimensi yang dikehendaki:

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

Isi kanvas dengan elemen seperti segi empat sama:

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

Akhir sekali, tambah pengendali acara mousemove yang menangkap nilai piksel pada kedudukan kursor:

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

Fungsi Utiliti

Kod ini bergantung pada fungsi sokongan untuk mencari kedudukan elemen dan menukar nilai RGB kepada heks. Takrifkan fungsi ini seperti berikut:

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

Contoh Langsung

Lawati pautan berikut untuk melihat contoh penuh dalam tindakan:

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

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Warna Piksel daripada Kanvas pada Mousemove?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!