html - 在 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);

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