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

【问题标题】：get mouse coordinates within image in canvas获取画布图像内的鼠标坐标
【发布时间】：2015-02-14 00:45:37
【问题描述】：

我有一个带有图像的 HTML 画布，我想获取用户在图像内点击的鼠标坐标。

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

谢谢

【问题讨论】：

看看这些问题的解决方案：stackoverflow.com/questions/3824332/… 或stackoverflow.com/questions/4848310/…，会是类似的，只是稍微改一下代码
你知道图片和画布的宽高吗？
@JonasGrumann 是的，我知道尺寸
@AlvaroMontoro 嗯，主要问题是图像可能会以不同的方式进行转换，我认为您提到的问题不会以任何方式考虑这一点

【解决方案1】：

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

context.translate 会将画布的原点移动到给定的 x,y 坐标。因此，如果 x,y 是“命中”图像的左上角，那么您可以使用 context.translate(x,y) 将 x,y 设为原点（实际上是 0,0）

您没有提供代码，但我假设您已经：

为了说明，如果你context.translate(imageLeftX,imageTopY)和fillRect(0,0,1,1)会在图片的左上角画一个矩形。

【讨论】：