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

Getting mouse point coordinates in Javascript HTML5 Canvas

本文关键字：鼠标 坐标 获取 Javascript HTML5 Canvas      更新时间：2023-09-26

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

当我点击画布的右下角时，鼠标点击得到的结果是x = 641, y = 386。敌人的坐标系统百分百准确。

看来敌人的坐标系统和鼠标的坐标系统不一样。我希望它们在同一个坐标系中。谢谢你的帮助!

这是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")
                }
            };  
        })*

我在使用画布时遇到了同样的问题(特别是当在页面上向下滚动时，它需要工作，从页面顶部通过任意div偏移，以及在不同的缩放级别)。我发现这个答案中的方法作为getMousePos函数的替代品是最健壮的。

您接收到不同的坐标可能是因为您使用了两种不同的方法。在玩家的位置，你使用offsetX而不是mousePos.X(比较enemy.X)

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

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

编辑:你可能也会发现这个链接很有帮助。

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

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

你可以计算精确的轨迹，即使你在画布外点击。然后笛卡尔坐标将在画布上的游戏大炮位置上具有中心(0,0)。计算画布左上角的炮/炮偏移量(real 0,0)，并使用这些偏移量来检测你的轨迹。

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

相关文章：