假设我在画布上绘制的图像是这样的:
myImage = new Image();
canvasContext.drawImage(myImage, 50, 50);
myImage.src = "foo.png"
如何在画布上获得myImage
的X / Y值?
答案 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";