如何用坐标模拟点击画布？

Question

在网页游戏中我想用坐标模拟点击。使用canvas的游戏界面

我尝试了几种方法，但没有任何帮助。

我尝试创建新的 MouseEvent，但它返回“true”，但什么也没发生。

const e1 = new MouseEvent("click", {
   clientX: 1673,
   clientY: 866
});

canvas.dispatchEvent(e1)

这会返回错误：canvas.elementFromPoint 不是函数

 canvas.elementFromPoint(1673,866);

我做错了什么或者画布可能有其他方法来模拟点击？

Answer 1

.elementFromPoint()

方法的目的是返回一个 HTML 元素，例如一个

<div>

。因此，此方法链接到 Document 对象。这意味着您无法在 canvas 元素的实例上调用它，因为它根本不可用 - 因此错误消息： canvas.elementFromPoint 不是函数

这是一个例子：

const e1 = new MouseEvent("click", {
  clientX: 50,
  clientY: 50
});

const canvas = document.getElementById("canvas");
canvas.addEventListener("click", (e) => {
  console.log(document.elementFromPoint(e.clientX, e.clientY));
});

canvas.dispatchEvent(e1);

<canvas id="canvas"></canvas>

Answer 2

主游戏画布应该位于可单击的 html div 内。 主要包含的 div 将被调整大小，因此您可以使用appendChild向其添加特定的div，并将它们绝对定位在画布顶部的特定按钮上。或者从容器 div 中获取特定的点击线。

Answer 3

在我的例子中，事件被忽略，因为没有

buttons: 1

在事件属性中。

Answer 4

function simulateCanvasClick(x, y) {
    const rect = canvas.getBoundingClientRect();
    const mouseX = x - rect.left;
    const mouseY = y - rect.top;

    const clickEvent = new MouseEvent('click', {
        clientX: mouseX,
        clientY: mouseY
    });

    canvas.dispatchEvent(clickEvent);
}

模拟CanvasClick(1673, 866);