在画布中间绘制图像

Question

我正在制作一个照片库，但是我的所有图像都被绘制在原点 (0,0)。

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

如何确保我的图像在画布对象中间绘制？

谢谢你的帮助！

更新

我可能没有正确表达我的问题。 我的意思是：我想让我的图像中心在画布的中心，而不是图像的左上角。

对此抱歉

编辑：错别字

编辑2：错别字

- Matt

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/。

- Mark Rhodes

---

@Mark 这是一个很好的答案。你能帮我解决这个问题吗？http://stackoverflow.com/questions/17487277/rotating-2-images-on-canvas 先谢谢了 :) - Beginner

Answer 2

如果你想将它精确地绘制在中心位置，你需要知道图像的宽度和高度。之后就变得很容易了：

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

- Andrei Nemes

---

那也可以，但是我表达问题有误。不过我的问题已经得到解决了。谢谢。 - Matt

Answer 3

将原点（始终为 0,0 -- 左上角）偏移 + (image.width / 2) 和 + (image.height / 2)，以便从画布中心开始绘制。

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

- Glitch Desire

---

那也可以，但我表达问题有误。不过我的问题已经解决了。谢谢！ - Matt

Answer 4

如果您想让图像居中并且正在重新调整图像大小，则它会从顶部角缩小，但中心点保持不变。如果您使用JavaScript调整图像大小，则不应该这样做，而是只需编辑图像使其更小/更大即可。

- BigmancozmoPlayz