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，并且在不同的缩放级别）。我发现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）并使用这些偏移来检测你的轨迹。

单击画布右侧的按钮，或者甚至在其外部都不可能获得负值。

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

3 个答案: