javascript HTML5 画布鼠标坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10403214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas Mouse coordinates
提问by foreee
I have an HTML file with a <canvas>element and I am trying to get the mouse coordinates in the clickevent. I am using this code:
我有一个带有<canvas>元素的 HTML 文件，我正在尝试获取click事件中的鼠标坐标。我正在使用此代码：
secondCanvas.addEventListener('click', function(e) {
console.log(e.pageX)
}, false);
When I click on the top left point I get in console 500~ number, not zero... what do I need to do to get the coordinates of the mouse on the canvas?
当我点击左上角时，我进入控制台 500~ 数字，而不是零......我需要做什么才能在画布上获得鼠标的坐标？
回答by gion_13
You should calculate the canvas mouse position by substracting the canvas element offset from the event offset (e.pageXand e.pageY).
Here's a linkthat explains how to get an element position in the dom, and the code should look like :
您应该通过从事件偏移量 (e.pageX和e.pageY) 中减去画布元素偏移量来计算画布鼠标位置。
这是一个解释如何在 dom 中获取元素位置的链接，代码应如下所示：
secondCanvas.addEventListener('click', function(e) {
var pos = {
x : e.pageX - canvasOffsetX,
y : e.pageY - canvasOffsetY
};
console.log(pos.x)
}, false);
回答by Hyman
It's because you're getting page coordinates. I'm guessing you want the current mouse position within either one of your two canvases? Hopefully this will solve your problem:
这是因为您正在获取页面坐标。我猜你想要在你的两个画布之一中的当前鼠标位置？希望这能解决您的问题：
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
Also this stackoverflow is similar to yours and might give you a better understanding: Tracking mouse position in canvas when no surrounding element exists
此外，此 stackoverflow 与您的类似，可能会让您更好地理解： 当不存在周围元素时在画布中跟踪鼠标位置
Solution by user: lwburk
用户解决方案：lwburk
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
$('#canvas').mousemove(function(e) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var coordinateDisplay = "x=" + x + ", y=" + y;
writeCoordinateDisplay(coordinateDisplay);
});
回答by Adi Degani
I use this code and it works perfectly for me. Once added, canvas mouse events have two new properties: canvasX, and canvasY which are properly mapped. Right after you obtained the canvas element, don't forget to call canvas.extendMouseEvents() and you're in business.
我使用此代码，它非常适合我。添加后，画布鼠标事件有两个新属性：canvasX 和 canvasY，它们被正确映射。在您获得 canvas 元素之后，不要忘记调用 canvas.extendMouseEvents() 并且您在做生意。
HTMLCanvasElement.prototype.extendMouseEvents = function() {
this.mapMouseEvent = function(ev) {
var r = this.getBoundingClientRect();
ev.canvasX = ev.pageX - r.left;
ev.canvasY = ev.pageY - r.top;
};
this.addEventListener("mousemove", this.mapMouseEvent);
this.addEventListener("click", this.mapMouseEvent);
this.addEventListener("contextmenu", this.mapMouseEvent);
this.addEventListener("dblclick", this.mapMouseEvent);
this.addEventListener("mousedown", this.mapMouseEvent);
this.addEventListener("mouseenter", this.mapMouseEvent);
this.addEventListener("mouseleave", this.mapMouseEvent);
this.addEventListener("mouseover", this.mapMouseEvent);
this.addEventListener("mouseout", this.mapMouseEvent);
this.addEventListener("mouseup", this.mapMouseEvent);
}
