在 HTML5 画布上获取图像坐标？

【问题标题】：Get image coordinates on HTML5 canvas?在 HTML5 画布上获取图像坐标？
【发布时间】：2013-11-08 06:53:33
【问题描述】：

我正在尝试在网站上构建一个功能，用户可以在该网站上单击并将图像拖动到 HTML5 画布上，并且他们可以在单击按钮时“保存”画布。它并不会真正保存我要获取每个图像的坐标并保存坐标的所有内容。如何获取每张图片的坐标？

【问题讨论】：

标签： html html5-canvas

【解决方案1】：

您需要将绘制的图像包装到某种对象中，其中包含您稍后需要提取的数据。

您可以存储位置和尺寸并使用它来检查点击，当点击被后发识别时，您将传递对象的位置作为结果。

这也意味着每次移动图像时都需要更新此对象。

一个简单的对象可以是：

function canvasImage(x, y, img) {
    this.image = img;
    this.x = x;
    this.y = y;
    this.width = img.width;
    this.height = img.height;
    return this;
}

然后当您加载图像时：

var canvasImage1 = new canvasImage(50, 70, img);

现在您只需在对象移动时更新它，并使用它来读取尺寸和实际图像。

【讨论】：

非常感谢您的回答！