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

마우스 이동 시 캔버스에서 픽셀 색상 가져오기

getImageData를 사용하여 캔버스 요소에서 마우스 아래 픽셀의 RGB 값을 가져오는 것이 가능합니다. () 방법. 이 메소드는 지정된 직사각형 영역에 대한 픽셀 데이터가 포함된 CanvasPixelArray 객체를 반환합니다.

마우스 커서 아래 픽셀의 RGB 값을 얻으려면 마우스 이벤트 객체의 clientX 및 clientY 속성을 사용하여 다음을 결정할 수 있습니다. 캔버스에서의 마우스 위치. 그런 다음 이 좌표를 사용하여 캔버스 컨텍스트에서 getImageData()를 호출하고 지정된 위치에서 1x1 픽셀 영역의 너비와 높이를 전달할 수 있습니다. 반환된 배열에는 픽셀의 RGB 값이 포함됩니다.

다음은 캔버스에서 마우스 아래의 픽셀 색상을 가져오는 방법을 보여주는 예제 코드 조각입니다.

<code class="javascript">const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const pixelData = ctx.getImageData(x, y, 1, 1).data;

  console.log(`The pixel at (${x}, ${y}) has the following RGB color: ${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]}`);
});</code>

이 예에서는 , mousemove 이벤트 리스너가 캔버스 요소에 연결됩니다. 마우스가 캔버스 위로 이동하면 이벤트 리스너가 트리거되고 이벤트 개체의 clientX 및 clientY 속성을 사용하여 캔버스에서 마우스의 좌표를 계산합니다. 그런 다음 getImageData() 메서드가 이러한 좌표와 함께 호출되어 지정된 영역에 대한 픽셀 데이터를 검색합니다. 마지막으로 픽셀 데이터가 콘솔에 기록됩니다.

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