在Javascript HTML5画布中获取鼠标点坐标

我很难获得鼠标坐标和英雄坐标

当我点击画布的右下角时，鼠标点击的结果是x=641，y=386。敌人的坐标系是100%精确的

敌人的坐标系似乎与鼠标坐标系不同。我希望它们在一个坐标系上。谢谢你的帮助

这是画布的初始化：

<canvas id="canvas" width = "1664" height = "1000" style = "border:1px solid gray; width: 640px; height 480px;"> </canvas>

---

函数getMousePos（画布，evt）{ var rect=canvas.getBoundingClientRect（）； 返回{ x:evt.clientX-rect.left， y:evt.clientY-rect.top }; } var mousePos=getMousePos（Context.canvas，e）； //使用mousePos.x或mousePos.y获取鼠标单击的坐标 var-mx，我的； 如果（e.offsetX）{ mx=e.offsetX； my=e.offsetY； } 否则如果（如layerX）{ mx=e.layerX； my=e.layerY； } 枪声 对于（var i=EnemyManager.friends.length-1；i>=0；i--）{ var敌人=敌人管理者。敌人[i] 控制台日志（“敌人：+敌人.x+”+敌人.y） log（“鼠标：+mousePos.x+”+mousePos.y） 如果（（敌方xmx）和&（敌方y+敌方高度>my））{ 警报（“目标命中”） } }; })*

---

我在使用canvas时也遇到了同样的问题（尤其是当在页面上向下滚动、从页面顶部偏移任意div以及在不同的缩放级别时，它需要工作）。我发现作为getMousePos函数的替代品，它是最健壮的。

您收到的坐标不同，可能是因为您使用了两种不同的方法。在玩家的位置上，您使用的是

offsetX

而不是

mousePos.X

（

敌方.X

）

另外，由于您将

getMousePos

的返回定义为X和Y，因此需要将它们作为X和Y访问。因此：

var mx, my;
mx = mousePos.X;
my = mousePos.Y;

---

编辑：您可能也会发现这很有帮助。

您正在画布外单击请参见我的示例

即使在画布外单击，也可以计算精确的轨迹。然后笛卡尔坐标将在画布上游戏加农炮位置的中心（0,0）。计算画布左上角的加农炮/火炮偏移量（实际值为0,0），并使用这些偏移量检测轨迹

---

点击画布右侧的按钮，甚至在画布外部都不可能得到负值

@redstoneologistcode-那有什么问题？你能分享敌人的坐标吗。。。

var mx, my;
mx = mousePos.X;
my = mousePos.Y;

document.getElementById('wrapper').addEventListener('click', on_canvas_click, false);