在 canvas 中获取图像内的鼠标坐标

Question

我有一个 HTML Canvas，里面有一张图片，我想获取用户在图片 中单击 的鼠标坐标。

我可以通过某种方式做到这一点，即从 canvas 的左上角开始获取鼠标坐标，但我需要使用图像本身的左上角作为 [0,0 ]点.

我正在处理这个例子http://phrogz.net/tmp/canvas_zoom_to_cursor.html

谢谢

Answer 1

context.translate(x,y) 命令完全符合您的要求。

context.translate 会将 canvas 的原点移动到给定的 x,y 坐标。因此，如果 x,y 是 "hit" 图像的左上角，那么您可以使用 context.translate(x,y)

将 x,y 设为原点（实际上是 0,0）

您没有提供代码，但我认为您已经：

• 判断用户点击鼠标的位置，

• 通过针对图像的边界对鼠标坐标进行命中测试来确定用户是否单击了图像，

• 提供您最初在 canvas

上绘制该图像的 x,y

为了说明，如果您 context.translate(imageLeftX,imageTopY) 然后 fillRect(0,0,1,1) 将在图像的左上角绘制一个矩形。