Question

假设我在画布上绘制的图像是这样的：

myImage = new Image();
canvasContext.drawImage(myImage, 50, 50);
myImage.src = "foo.png"

如何在画布上获得myImage的X / Y值？

Answer 1

当您在画布上绘制图像或任何其他形状时，它只会与其余像素混合在一起，并且画布不知道您刚刚绘制的位置。

为了跟踪绘制的位置，您需要使用例如对象数组来维护它：

function CanvasImage(img, x, y) {
    this.image = img;
    this.x = x;
    this.y = y;
    this.draw = function(ctx) {
        ctx.drawImage(img, x, y);
    }
    return this;
}

现在，您可以通过执行以下操作来跟踪图像的绘制位置：

var myImages = [];
var myCanvasImage = new CanvasImage(img, 50, 50);

myImages.push(myCanvasImage);

myCanvasImage.draw();

当您需要图像的坐标时，您可以遍历数组并读取x和y。如果您有多个图像，则id可能是一件好事，或者您可以使用图像的src属性来识别您正在处理的图像（如果您将相同的图像多次绘制到画布，则id会更好）。 / p>

alert(myCanvasImage.x + ' ' +myCanvasImage.y);

还要记住在onload事件中处理图像以确保图像已正确加载：

myImage = new Image();
myImage.onload = function() {
    /// continue here...
}
myImage.src = "foo.png";

如何获取在HTML5画布上绘制的图像的X / Y值？

1 个答案: