在畫布中間繪製圖像

Question

我正在製作照相館，但所有圖像都繪製在原點（0,0）上。

canvasContent.drawImage(arrPhoto[currentIndex], 0, 0); 

我怎樣才能確保我的圖像繪製在畫布對象的中間？

感謝您的幫助！

UPDATE

我可能已經形成了我的問題有點不對勁。 我的意思是：我希望我的圖像中間位於畫布中間，而不是圖像的頂角。

對不起爲

編輯：錯字

EDIT2：錯字

Answer 1

如果提供了x, y位置，像這樣：

var image = arrPhoto[currentIndex]; 
canvasContent.drawImage(image, 
     canvas.width/2 - image.width/2, 
     canvas.height/2 - image.height/2 
); 

那麼它應該出現在中心。這個實例的一個例子是：http://jsfiddle.net/VPLZc/2/。

Answer 2

偏移原點（這始終是0,0 - 左上）由+ (image.width/2)和+ (image.height/2)開始在中心抽選的畫布。

drawImage(image, image.width/2, image.height/2) 

Answer 3

如果你想把它畫到中心，你需要知道圖像的寬度和高度。它成爲繼易：

//var canvas = document.getElementById("yourCanvasElementID"); 
var img = arrPhoto[currentIndex]; 
canvasContent.drawImage(img, (canvas.width-img.width)/2, (canvas.height-img.height)/2);