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

Question

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

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

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

这是canvas的初始化：

<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从页面顶部偏移，并且缩放比例不同）。 我发现此答案中的方法是最可靠的方法，可以代替该getMousePos函数。

Answer 2

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

另外，由于您将getMousePos的返回值getMousePos为X和Y，因此需要将它们作为X和Y进行访问。因此：

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

编辑：您可能还会发现此链接很有帮助。

Answer 3

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

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

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

单击画布的右上角，甚至在其外部单击，都不可能获得负值。