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

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上获取鼠标坐标

在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 个解决方案

解决方案1
4 已采纳 2012-04-01 04:44:22

解决方案2
2 2011-08-26 20:51:20

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

问题描述

2 个解决方案

解决方案1 4 已采纳 2012-04-01 04:44:22

解决方案2 2 2011-08-26 20:51:20

解决方案1
4 已采纳 2012-04-01 04:44:22

解决方案2
2 2011-08-26 20:51:20