在画布中获取图像内的鼠标坐标

Question

我有一个带有图片的HTML Canvas，我想获得鼠标坐标，用户点击图片中的 。

我可以这样做，我从画布的左上角开始得到鼠标坐标，但是我需要使用图像本身的左上角作为[0,0]点。

我正在使用此示例http://phrogz.net/tmp/canvas_zoom_to_cursor.html

感谢

Answer 1

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

context.translate会将画布的原点移动到给定的x，y坐标。因此，如果x，y是＆＃34;命中＆＃34;的左上角。然后你可以使用context.translate(x,y)

使x，y成为原点（实际为0,0）

您不会提供代码，但我认为您已经提供了代码：

• 确定用户点击鼠标的位置

• 确定用户是否通过针对图像边界点击测试鼠标坐标来点击图像，

• 可以在画布上绘制该图像的地方使用x，y

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