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

Question

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

Answer 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);

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