Трекер мыши на холсте

Мне нужна функция для моего простого холста в javascript:

Функция определяет, где находится указатель мыши на холсте, и выводит координаты в две переменные, pointerX и pointerY.

Функция постоянно обновляется, поэтому переменные всегда точны.

Спасибо за ваше время, и если у вас есть какие-либо вопросы по неупомянутым деталям, пожалуйста, ответьте ниже, и я отвечу. Спасибо!


javascript canvas mouse tracker
person Assafi Cohen-Arazi    schedule 12.02.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Взгляните на 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>

person Xi Sigma    schedule 12.02.2017