정확한 마우스 좌표를 얻지 못하는 문제: 페이지 크기를 조정할 때 HTML5 캔버스 사용

Question

이 픽셀 효과를 프런트엔드 전문가로부터 만들고 싶었습니다.

전체 화면 캔버스에서 전체 픽셀 효과를 얻을 수 있었지만:

으아악

마우스 좌표를 알아내기도 쉽습니다

으아악

이때 캔버스의 너비와 높이는 문서의 너비와 높이가 같아 마우스의 정확한 좌표를 쉽게 알 수 있습니다. 하지만 800px 정확도의 크기를 사용하려고 하면 크기 조정과 관련된 몇 가지 문제도 있습니다.

마우스 정확도를 유지하는 방법을 알고 싶습니다.

도움을 주셔서 정말 감사합니다.

Answer 1

ex와 e.y를 사용하면 캔버스의 이벤트 리스너에서 사용하더라도 캔버스의 좌표뿐만 아니라 전체 페이지의 왼쪽 상단 픽셀을 기준으로 마우스 좌표를 반환한다고 믿습니다. "엉망"이라는 말은 클릭하는 위치에 관계없이 픽셀 효과가 고정된 방향으로 오프셋된다는 의미라면 이것이 문제일 수 있으므로 e.x 및 e.y를 e.clientX 및 e.clientY로 바꿔야 합니다. e.clientX의 "클라이언트"는 리스너가 대상으로 하는 요소를 참조하며 페이지가 아닌 요소를 기준으로 이벤트 좌표가 제공되도록 지정합니다. 다른 방법으로 질문이 발생하면 답변이 없는 것 같습니다.