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 값을 16진수로 변환하는 지원 기능에 의존합니다. 이러한 함수를 다음과 같이 정의하세요.

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

실시간 예제

전체 예제를 보려면 다음 링크를 방문하세요.

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

위 내용은 Mousemove의 캔버스에서 픽셀 색상을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!