在画布中间绘制图像

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

如果要将其画在中心，则需要知道图像的宽度和高度。之后变得容易：

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