如何用坐标模拟点击 canvas？

Question

在 web 游戏中，我想用坐标模拟点击。 游戏接口使用canvas

我尝试了几件事，但没有任何帮助。

我试图制作新的 MouseEvent，但它返回“真”并且什么也没发生。

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

canvas.dispatchEvent(e1)

这让我返回错误： canvas.elementFromPoint is not a function

canvas.elementFromPoint(1673,866);

我做错了什么或 canvas 可能有另一种模拟点击的方法？

Answer 1

.elementFromPoint()方法的目的是返回一个 HTML 元素，例如一个<div> 。 因此，此方法链接到文档object。 这意味着您不能在 canvas 元素的实例上调用它，因为它根本不可用 - 因此错误消息： canvas.elementFromPoint is not a ZC1C425268E68385D1AB5074C17A94F

这是一个例子：

 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

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