在canvas上获取鼠标位置
有没有办法将位置鼠标放在<canvas>标签内？ 我希望位置相对于<canvas>右上angular，而不是整个页面。
最简单的方法可能是将一个onmousemove事件监听器添加到canvas元素，然后可以从事件本身获取相对于canvas的坐标。
如果你只需要支持特定的浏览器，这是微不足道的，但是f.ex之间是有区别的。 Opera和Firefox。
像这样的东西应该适用于这两个：
function mouseMove(e) { var mouseX, mouseY; if(e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if(e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } /* do something with mouseX/mouseY */ }
接受的答案不会每次都有效。 如果您不使用相对位置，则offsetX和offsetY属性可能会引起误解。
您应该使用canvasAPI中的函数： canvas.getBoundingClientRect() 。
function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y); }, false);
另外请注意，您将需要CSS：
位置：相对;
设置为您的canvas标签，以获取canvas内的相对鼠标位置。
如果有边框，偏移将会改变
我将分享迄今为止创build的最防弹的鼠标代码。 它适用于所有的浏览器将所有的方式填充，边距，边框和加载项（如stumbleupon顶部栏）
// 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 // takes an event and a reference to the canvas function getMouse = function(e, canvas) { var element = canvas, offsetX = 0, offsetY = 0, mx, my; // Compute the total offset. It's possible to cache this if you want 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 (like the stumbleupon bar) // This part is not strictly necessary, it depends on your styling offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft; offsetY += stylePaddingTop + styleBorderTop + htmlTop; mx = e.pageX - offsetX; my = e.pageY - offsetY; // We return a simple javascript object with x and y defined return {x: mx, y: my}; }
你会注意到我使用了一些（可选的）在函数中未定义的variables。 他们是：
stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0; stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0; styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0; styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0; // Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page // They will mess up mouse coordinates and this fixes that var html = document.body.parentNode; htmlTop = html.offsetTop; htmlLeft = html.offsetLeft;
我build议只计算一次，这就是为什么他们不在getMouse函数。
对于鼠标位置，我通常使用jQuery，因为它规范了一些事件属性。
function getPosition(e) { //this section is from http://www.quirksmode.org/js/events_properties.html var targ; if (!e) e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; if (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode; // jQuery normalizes the pageX and pageY // pageX,Y are the mouse positions relative to the document // offset() returns the position of the element relative to the document var x = e.pageX - $(targ).offset().left; var y = e.pageY - $(targ).offset().top; return {"x": x, "y": y}; }; // now just make sure you use this with jQuery // obviously you can use other events other than click $(elm).click(function(event) { // jQuery would normalize the event position = getPosition(event); //now you can use the x and y positions alert("X: " + position.x + " Y: " + position.y); });
这在所有浏览器中都适用于我。
编辑：
我从我使用的一个类复制了代码，所以jQuery调用this.canvas是错误的。 更新后的函数计算出哪个DOM元素（ targ ）导致事件，然后使用该元素的偏移量来计算出正确的位置。
GEE是一个无尽有用的图书馆，用于平滑麻烦，包括鼠标位置。
使用鼠标事件和canvas属性的简单方法：
JSFiddlefunction演示http://jsfiddle.net/Dwqy7/5/
（注意：边界不计算，导致在一个接一个）：
-
将一个鼠标事件添加到您的canvas上
canvas.addEventListener("mousemove", mouseMoved); -
调整
event.clientX和event.clientY基于：
canvas.offsetLeft
window.pageXOffset
window.pageYOffset
canvas.offsetTop
从而：canvasMouseX = event.clientX - (canvas.offsetLeft - window.pageXOffset); canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);
原来的问题要求从右上方的坐标（第二个function）。 这些函数将需要在他们可以访问canvas元素的范围内。
左上angular0,0：
function mouseMoved(event){ var canvasMouseX = event.clientX - (canvas.offsetLeft - window.pageXOffset); var canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset); }
右上angular0,0：
function mouseMoved(event){ var canvasMouseX = canvas.width - (event.clientX - canvas.offsetLeft)- window.pageXOffset; var canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset); }
我会使用jQuery。
$(document).ready(function() { $("#canvas_id").bind( "mousedown", function(e){ canvasClick(e); } ); } function canvasClick( e ){ var x = e.offsetX; var y = e.offsetY; }
这样，你的canvas可以在你的页面的任何地方，相对或绝对。
从鼠标位置减去canvasDOM元素的X和Y偏移量，得到canvas内的局部位置。
