在没有jQuery的情况下将光标放在画布中

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);
  };

资源