캔버스에서 마우스 아래 픽셀의 RGB 값을 얻는 방법은 무엇입니까?-JS 튜토리얼-php.cn

캔버스에서 마우스 아래 픽셀의 RGB 값을 얻는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-10-31 08:13:29

원래의

202명이 탐색했습니다.

How to Get the RGB Value of a Pixel Under the Mouse on a Canvas?

Mousemove를 사용하여 캔버스에서 마우스 아래의 픽셀 색상 검색

웹 애플리케이션에서는 픽셀의 RGB 값을 직접 얻는 것이 유용한 경우가 많습니다. 캔버스 요소와 상호 작용할 때 마우스 커서 아래에 위치합니다. JavaScript에서 이를 달성하는 방법은 다음과 같습니다.

예:

이 HTML 코드를 고려하세요.

<code class="html"><canvas id="canvas" width="200" height="200"></canvas>
<div id="color-value"></div></code>

로그인 후 복사

그리고 다음 JavaScript 코드도 있습니다.

<code class="js">const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// Set up an image on the canvas
const img = new Image();
img.src = "path/to/image.jpg";

img.onload = function() {
  context.drawImage(img, 0, 0);
};

// Add event listener for mouse movement
canvas.addEventListener("mousemove", (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  const pixelData = context.getImageData(x, y, 1, 1).data;
  const r = pixelData[0];
  const g = pixelData[1];
  const b = pixelData[2];
  
  document.getElementById("color-value").innerHTML = `RGB: ${r}, ${g}, ${b}`;
});</code>

로그인 후 복사

이 예제에서는 drawImage 메서드를 사용하여 캔버스에 이미지를 표시합니다. 마우스가 캔버스 위로 이동하면 mousemove 이벤트 리스너는 현재 마우스 위치를 캡처하고 getBoundingClientRect 함수를 사용하여 캔버스 내 픽셀 좌표를 계산합니다. 그런 다음 getImageData 메소드를 사용하여 픽셀 데이터를 검색하고 색상 값 div에 RGB 값을 표시합니다.

추가 참고 사항: