Question

我在画布上制作游戏，需要点击画布的某个区域。
我需要找到一种方法来找到鼠标的坐标以及如何检测是否点击了卡宾区域我想要一个看起来像这样的命令：

    if(MouseX>20 && MouseX<40 && MouseY >20 && MouseY <40 && MouseClick==true){
alert("you clicked this area");
}

Answer 1

您可以为鼠标移动创建事件侦听器并跟踪x和y坐标。可以为click事件创建另一个侦听器，也就是说，如果点击位于某个位置，则可以访问。

fiddle

var mousePos = {
    x: null,
  y: null
}

document.addEventListener("mousemove", function(e) {
    mousePos.x = e.clientX;
  mousePos.y = e.clientY;
});

document.addEventListener("click", function(e) {
    console.log(mousePos);
});

两个监听器都不是必需的，因为clientX和clientY都是在点击的情况下，但我发现即使没有单击按钮，通常也可以知道鼠标的位置。< / p>

<强>更新

我习惯于处理全屏画布，但我放在这里的代码确实只会让你在文档而不是画布上放置鼠标位置。事件对象上的.layerX和.layerY将为您提供相对于元素的位置。

Answer 2

如果您对画布区域感兴趣，请使用此跨浏览器代码：

var canvas = document.querySelector('canvas');
canvas.addEventListener('click', function (e) {
    var MouseX = e.pageX - this.offsetLeft; 
    var MouseY = e.pageY - this.offsetTop;
});

如何检测是否单击了Html Canvas的某个区域

2 个答案: