画布上的鼠标跟踪器

【问题标题】：Mouse Tracker on Canvas画布上的鼠标跟踪器
【发布时间】：2017-02-12 17:56:43
【问题描述】：

我需要一个用于 javascript 中的简单画布的函数：

该函数确定鼠标指针在画布上的位置，并将坐标输出到两个变量pointerX和pointerY中。

函数不断更新，所以变量总是准确的。

感谢您的宝贵时间，如果您对未提及的细节有任何疑问，请在下方回复，我会回复。谢谢！

【问题讨论】：

标签： javascript canvas mouse tracker

【解决方案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>

【讨论】：