Question

我正在制作一个照相馆，但我的所有照片都是在原点上画的（0,0）。

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

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

感谢您帮助我！

更新

我可能认为我的问题有点不对劲。我的意思是：我希望我的图像中间位于画布的中间，而不是图像的上角。

对不起

编辑：拼写错误

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);

Answer 3

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

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

Answer 4

如果您希望它位于中心并重新缩放图像，它会从顶角缩小，但中心点保持不变。如果您使用 JavaScript 调整图像大小，则不应这样做，而应将图像编辑为更小/更大。

在画布中间绘制图像

4 个答案: