javascript – HTML5 / Canvas Mouse放置在实际网站中时关闭
作者：互联网
我正在捕捉像这样的鼠标位置
mouse_move: function(e)
{
mousePos.x = e.pageX - vr.o.context.canvas.offsetLeft;
mousePos.y = e.pageY - vr.o.context.canvas.offsetTop;
},
在开发过程中,它在所有现代浏览器中都像梦一样,甚至经过测试包装< canvas />在一个基本的dom结构,以确保鼠标位置调整…
显然现在我把它放在实际的网站上它不起作用……
你可以在这里看到http://jondavidjohn.com/projects/
鼠标位置在实际光标的南边相当远,任何具体可能导致这种情况的东西？
解
mouse_move: function(e)
{
mousePos.x = e.offsetX;
mousePos.y = e.offsetY;
},
解决方法:
复制自：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};
}
标签：mouse-position,javascript,html5,canvas 来源： https://codeday.me/bug/20190730/1576993.html