캔버스 요소를 기준으로 마우스 좌표를 얻는 방법은 무엇입니까?

캔버스 요소를 기준으로 마우스 좌표 가져오기

간단한 캔버스 기반 페인팅 애플리케이션을 만들려는 노력 중 한 가지 일반적인 과제는 캔버스에서의 마우스 위치.

해결책

이 문제를 해결하는 한 가지 접근 방식은 BoundingClientRect 속성을 ​​활용하는 것입니다. 이는 다음과 같이 구현할 수 있습니다.

<code class="javascript">document.getElementById('clickme').onclick = function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  console.log("Left: " + x + " ; Top: " + y + ".");
};</code>

예

<code class="html"><div id="clickme">
  Click Me -<br>
  (this box has margin-left: 100px; margin-top: 20px;)
</div></code>

설명

1. clickme 요소를 마우스로 클릭하면 onclick 이벤트 핸들러가 트리거됩니다.
2. getBoundingClientRect() 메소드는 뷰포트를 기준으로 요소의 위치와 크기를 검색합니다.
3. e.clientX 및 e.clientY 속성은 뷰포트 내에서 마우스의 절대 위치를 나타냅니다.
4. 이러한 절대 좌표에서 ret.left 및 ret.top을 빼면 요소의 왼쪽 상단 모서리를 기준으로 마우스의 위치를 ​​얻을 수 있습니다.

위 내용은 캔버스 요소를 기준으로 마우스 좌표를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!