鼠标在canvas里的相对坐标

  1. <canvas id="canvas"></canvas>
  1. //获取相对于canvas的坐标
  2. function captureMouse(element) {
  3.     let mouse = { x: 0, y: 0 };
  5.     element.addEventListener('mousemove', function (event) {
  6.         let x, y;
  7.         if (event.pageX || event.pageY) {
  8.             x = event.pageX;
  9.             y = event.pageY;
  10.         } else {
  11.             x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  12.             y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  13.         }
  15.         x -= element.offsetLeft;
  16.         y -= element.offsetTop;
  18.         mouse.x = x;
  19.         mouse.y = y;
  20.     }, false);
  22.     return mouse;
  23. }
  25. var canvas = document.getElementById("canvas");
  26. var mouse = captureMouse(canvas); //鼠标在画布的相对坐标，随着鼠标在画布上移动实时变化