마우스 추적기 캔버스

Question

에 I 자바 스크립트 내 간단한 캔버스하는 기능을해야 마우스 포인터가 캔버스 상에 두 변수 pointerX 및 pointerY에 좌표를 출력 여기서

는

함수를 결정한다.

변수가 항상 정확하도록 함수가 계속 업데이트됩니다.

감사의 말을 보내 주시고, 언급되지 않은 내용에 대한 질문이 있으시면 아래 회신 해 주시면 답변 해 드리겠습니다. 감사!

Answer 1

당신이 여기 가서 MouseEvent

과를 살펴 보자 :

var canvas = document.querySelector("canvas"); 
 
var h1 = document.querySelector("h1"); 
 

 
canvas.addEventListener("mousemove", function(e){  
 
    var x = e.pageX - canvas.offsetLeft; 
 
    var y = e.pageY - canvas.offsetTop; 
 
    h1.innerText = `x:${x},y:${y}` 
 
})

canvas{ 
 
    border:solid; 
 
}

<canvas width="100" height="100"></canvas> 
 
<h1></h1>