在 Javascript HTML5 Canvas 中获取鼠标点坐标

Question

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

当我单击画布的右下角时，鼠标单击的结果为 x = 641, y = 386。敌方坐标系100%准确。

好像敌人坐标系和鼠标坐标系不一样。我希望它们位于单个坐标系上。感谢您的帮助！

这是画布的初始化：

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

---

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

var mousePos = getMousePos(Context.canvas,e);
            //Use mousePos.x or mousePos.y to get the coordinates of the mouse click
            var mx, my;
            if(e.offsetX) {
                mx = e.offsetX;
                my = e.offsetY;
            }
            else if(e.layerX) {
                mx = e.layerX;
                my = e.layerY;
            }
            Gun.shoot()
            for (var i = EnemyManager.enemies.length - 1; i >= 0; i--) {
                var enemy = EnemyManager.enemies[i]
                console.log("Enemy: " + enemy.x + " " + enemy.y)
                console.log("Mouse: " + mousePos.x + " " + mousePos.y)

                if ((enemy.x < mx) && (enemy.y < my) && ( (enemy.x + enemy.width) > mx ) && (enemy.y + enemy.height > my)) {
                    alert("Target HIT")
                }
            };  
        })*

Answer 1

我在使用画布时遇到了同样的问题（尤其是在页面上向下滚动时，它需要在任意 div 处从页面顶部偏移，以及在不同的缩放级别下工作）。我发现 the approach in this answer 是最强大的 getMousePos 函数的替代品。

Answer 2

您收到不同的坐标可能是因为您使用了两种不同的方法。在玩家的位置上，您使用的是offsetX 而不是mousePos.X（相比之下enemy.X）

此外，由于您将 getMousePos 的返回定义为 X 和 Y，因此您需要将它们作为 X 和 Y 访问。所以：

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

编辑：您可能还会发现这个link 很有帮助。

Answer 3

您在画布外部单击，请参阅我的示例，http://jsfiddle.net/gn0pkkra/。

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

即使您在画布之外单击，也可以计算出准确的轨迹。然后笛卡尔坐标将在画布中的游戏大炮位置上具有中心 (0,0)。计算画布左上角的大炮/枪偏移（实际 0,0）并使用这些偏移来检测您的轨迹。

点击画布的右下角，甚至在画布之外，是不可能得到负值的。