Mousemove로 캔버스에서 픽셀 색상 얻기
소개
아래의 정확한 픽셀 색상 얻기 캔버스의 마우스 커서는 이미지 편집, 픽셀 기반 게임 또는 색상 선택 도구와 같은 다양한 응용 프로그램에 유용할 수 있습니다. 이 문서에서는 이 작업을 수행할 수 있는 포괄적인 예를 제공합니다.
픽셀 색상을 얻는 단계
초기 캔버스 설정 :
마우스 움직임 처리:
이미지 데이터 가져오기:
RGB 값 추출:
디스플레이 색상:
예제 코드:
아래는 위에 설명된 단계를 보여주는 완전한 예입니다.
<code class="html"><canvas id="my-canvas" width="200px" height="200px"></canvas> <div id="color-info"></div></code>
<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 rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const pixelData = ctx.getImageData(x, y, 1, 1).data; const colorInfo = `RGB: (${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`; document.getElementById('color-info').innerHTML = colorInfo; });</code>
이 예에서 색상 정보 div는 픽셀의 RGB 색상 값을 표시합니다. 캔버스를 가로질러 움직일 때 마우스 커서가 이동합니다.
추가 고려 사항
위 내용은 캔버스의 마우스 커서 아래에서 픽셀 색상을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!