如何獲取在HTML5畫布上繪製的圖像的X/Y值？

Question

比方說，我有一個形象被繪製在畫布上，像這樣：

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

我如何獲得X /的myImage 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會更好）。

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

還記得來處理圖像的onload事件，以確保圖像已正確加載：

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