如何检测是否单击 Html 画布的某个区域

How to sense if a certain area of an Html Canvas is clicked

本文关键字：区域 Html 单击 何检测 检测 是否      更新时间：2023-09-26

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

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

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

小提琴

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 都在单击事件上，但我发现即使按钮没有被单击，知道鼠标的位置通常也是件好事。

更新

我

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

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

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