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

Question

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

我真的不想使用 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);
  };

Source