Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mendapatkan Warna Piksel daripada Kanvas pada Mousemove?

Bagaimana untuk Mendapatkan Warna Piksel daripada Kanvas pada Mousemove?

Patricia Arquette
Lepaskan: 2024-10-31 10:03:01
asal
302 orang telah melayarinya

How to Get the Pixel Color from a Canvas on 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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan