如何在 Mousemove 上從畫布上取得像素色？-js教程-PHP中文網

如何在 Mousemove 上從畫布上取得像素色？

Patricia Arquette

發布： 2024-10-31 10:03:01

原創

317 人瀏覽過

How to Get the Pixel Color from a Canvas on Mousemove?

在Mousemove 上從畫布取得像素顏色

概述

本文探討如何在滑鼠移動時擷取滑鼠遊標下像素的RGB 值畫布元素上移動。我們將透過一個獨立的範例提供全面的方法。

解決方案

要實現此目的，首先創建具有所需尺寸的畫布：

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

登入後複製

填充畫布上有正方形等元素：

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

登入後複製

最後，新增mousemove 事件處理程序來捕捉遊標位置的像素值：

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

登入後複製

實用函數

此程式碼依賴支援函數來尋找元素的位置並將RGB值轉換為十六進制。定義這些函數如下：

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

登入後複製