如何检测点击拉伸 canvas 的位置？

Question

我有一个 canvas 因为我正在制作沙盒游戏而被拉长了。我无法使用正常方法检测页面上的像素 canvas 被点击，因为我需要知道点击了哪个拉伸像素。希望这是有道理的？

Answer 1

您所要做的就是根据当前 canvas 大小和原始 canvas 大小缩放位置。

function scaleCursorPoint(int mouseX, int mouseY, ctx) {
    return {
        x: mouseX * (ctx.canvas.width / ctx.width), 
        y: mouseY * (ctx.canvas.height / ctx.height) 
   };
}

ctx（用 canvas.getContext('2d') 得到的具有原始未拉伸的宽度。ctx.canvas 得到原始 canvas DOM 元素。ctx.canvas.width 是 DOM 元素的大小（拉伸后的大小）。

将两者相除得到比例值。然后只需将该比例值乘以你得到的分数就可以了

如何检测点击拉伸 canvas 的位置？

How to detect where a stretched canvas was clicked?

javascript

mouse

canvas

sandbox