> 웹 프론트엔드 > JS 튜토리얼 > Mousemove의 캔버스에서 픽셀 색상을 얻는 방법은 무엇입니까?

Mousemove의 캔버스에서 픽셀 색상을 얻는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-10-31 10:03:01
원래의
318명이 탐색했습니다.

How to Get the Pixel Color from a Canvas on 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿