Tracker souris sur toile

Question

je besoin d'une fonction pour ma toile simple javascript:

La fonction détermine où le pointeur de la souris est sur la toile et envoie les coordonnées en deux variables, pointerX et pointerY.

La fonction est mise à jour en permanence afin que les variables soient toujours précises.

Merci pour votre temps, et si vous avez des questions pour les détails non mentionnés, s'il vous plaît répondez ci-dessous et je vais répondre. Merci!

Answer 1

Jetez un oeil à MouseEvent

et ici vous allez:

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>