javascript - 在没有 jQuery 的情况下获取画布中的光标位置

Question

我正在尝试学习如何使用 HTML 画布元素，当然，我正在制作一个绘图应用程序。因此，我为应用程序的实际绘图和动画部分设置了代码，但我不确定如何获取鼠标光标的位置。

我真的不想使用 jQuery，因为我不想学习它的所有功能并且必须经历设置它的过程。谢谢你的帮助！

Answer 1

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect(), root = document.documentElement;

    // return relative mouse position
    var mouseX = evt.clientX - rect.left - root.scrollLeft;
    var mouseY = evt.clientY - rect.top - root.scrollTop;
    return {
      x: mouseX,
      y: mouseY
    };
  }

  window.onload = function() {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    canvas.addEventListener('mousemove', function(evt) {
      var mousePos = getMousePos(canvas, evt);
      var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
      alert(message);
    }, false);
  };

资源

Answer 2

当使用它在画布上绘图时，我更喜欢这段代码：

    function getMousePos(canvas, event)
{
    var mouseX = event.pageX - canvas.offsetLeft;
    var mouseY = event.pageY - canvas.offsetTop;
    return {
        x: mouseX,
        y: mouseY };
}

这是我用来避免滚动、定位和获取鼠标正确位置时遇到的其他问题的代码。