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

时间:2013-12-14 20:24:31

标签: html5 image canvas

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

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

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

1 个答案:

答案 0 :(得分: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";