마우스 이동 시 캔버스에서 픽셀 색상 가져오기
mousemove 이벤트를 사용하면 사용자의 마우스가 움직일 때 위치를 추적할 수 있습니다. 캔버스 요소. 캔버스를 기준으로 마우스 위치를 가져오고 getImageData() 메서드를 사용하면 마우스 커서 아래 픽셀의 RGB 값을 검색할 수 있습니다.
JavaScript에서 마우스 아래 픽셀 색상을 얻으려면 다음을 따르세요. 다음 단계:
예제 코드
다음은 마우스 아래에서 픽셀 색상을 가져오는 방법을 보여주는 완전한 예입니다.
<code class="javascript">const canvas = document.getElementById('my-canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(0, 0, 100, 100); canvas.addEventListener('mousemove', (e) => { const x = e.offsetX; const y = e.offsetY; const pixelData = ctx.getImageData(x, y, 1, 1).data; const color = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`; console.log(color); });</code>
이 예제에서는 마우스가 캔버스 위로 이동할 때 마우스 커서 아래 픽셀의 RGB 색상을 콘솔에 기록합니다.
위 내용은 JavaScript로 캔버스의 마우스 아래 픽셀 색상을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!