javascript - 坐标鼠标 Canvas

Question

所以...我用 jquery 创建了 canvas 元素:

var canvasElement = $("<canvas id='map' width='" + CANVAS_WIDTH + "' height='" + CANVAS_HEIGHT + "'></canvas");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');

现在我想获取鼠标坐标，但下一个代码不起作用:

canvasElement.onmousemove = mousemove;
function mousemove(evt) {
  var mouseX = evt.pageX - canvasElement.offsetLeft;
  var mouseY = evt.pageY - canvasElement.offsetTop;
  alert(mouseX+":"+mouseY);
}

canvasElement.offsetLeft 不起作用，evt.pageX 也...帮助!

Answer 1

这些属性不是跨浏览器的。

我知道获取 Canvas 位置的两种解决方案:

• 最简单的方法:使用 jQuery offset

• 另一个:使用自定义的复杂代码:

   if (!canvasElement.offsetX) {
      // firefox
      var obj = canvasElement;
      var oX = obj.offsetLeft;var oY = obj.offsetTop;
      while(obj.parentNode){
          oX=oX+obj.parentNode.offsetLeft;
          oY=oY+obj.parentNode.offsetTop;
          if(obj==document.getElementsByTagName('body')[0]){break}
          else{obj=obj.parentNode;}
      }
      canvas_position_x = oX;
      canvas_position_y = oY;
  } else {
      // chrome
      canvas_position_x = canvasElement.offsetX;
      canvas_position_y = canvasElement.offsetY;
  }
  

由于存在循环，您最好存储canvas_position_x 和canvas_position_y 并在每个文档resize 时重新计算它们，而不是在每个鼠标移动。

Demonstration