Question

我正在捕捉像这样的鼠标位置

    mouse_move: function(e)
    {
        mousePos.x = e.pageX - vr.o.context.canvas.offsetLeft;
        mousePos.y = e.pageY - vr.o.context.canvas.offsetTop;
    },

在开发过程中，它在所有现代浏览器中都像梦一样工作，甚至测试在基本dom结构中包装<canvas/>以确保调整鼠标位置......

显然现在我把它放在实际的网站上它不起作用......

您可以在此处查看http://jondavidjohn.com/projects/

鼠标位置在实际光标以南相当远的地方，任何具体可能导致这种情况的东西？

的解的

mouse_move: function(e)
{
    mousePos.x = e.offsetX;
    mousePos.y = e.offsetY;
},

Answer 1

COPIED FROM：http://simonsarris.com/blog/510-making-html5-canvas-useful

在画布上获取鼠标坐标

在Canvas上获得良好的鼠标坐标有点棘手。您可以使用offsetX / Y和LayerX / Y，但在Webkit（Chrome和Safari）中不推荐使用LayerX / Y，而Firefox没有offsetX / Y.

获得正确鼠标位置的最无懈可击的方法如下所示。你必须走上树，将偏移量加在一起。然后，您必须向偏移量添加任何填充或边框。最后，要在页面上有固定位置元素（如wordpress管理栏或stumbleupon栏）时修复坐标问题，必须添加's offsetTop和offsetLeft。

然后你只需从e.pageX / Y值中减去该偏移量，几乎在所有可能的情况下你都会得到完美的坐标。

// Creates an object with x and y defined,
// set to the mouse position relative to the state's canvas
// If you wanna be super-correct this can be tricky,
// we have to worry about padding and borders
CanvasState.prototype.getMouse = function(e) {
  var element = this.canvas, offsetX = 0, offsetY = 0, mx, my;

  // Compute the total offset
  if (element.offsetParent !== undefined) {
    do {
      offsetX += element.offsetLeft;
      offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
  }

  // Add padding and border style widths to offset
  // Also add the <html> offsets in case there's a position:fixed bar
  offsetX += this.stylePaddingLeft + this.styleBorderLeft + this.htmlLeft;
  offsetY += this.stylePaddingTop + this.styleBorderTop + this.htmlTop;

  mx = e.pageX - offsetX;
  my = e.pageY - offsetY;

  // We return a simple javascript object (a hash) with x and y defined
  return {x: mx, y: my};
}

Answer 2

现在改用e.offsetX和e.offsetY。

当你引入其他一些东西时，实际上会变得更复杂，比如边距和填充，但是offsetX和offsetY会比你最少说的更准确。

我现在没有新的“防弹工作在每种情况下”鼠标代码，如果您认为自己需要它，我可以稍后为您提供。

编辑：Derp！谢谢chopperdave最终提供了我忘记添加的代码！

HTML5 / Canvas Mouse放置在实际站点中时关闭

2 个答案: