在画布中间绘制图像

Posted 2023-03-05

【中文标题】在画布中间绘制图像

【英文标题】：Draw images on in the middle of a canvas

【发布时间】：2013-04-25 10:34:20

【问题描述】：

我正在制作一个相册，但我所有的图像都是在原点 (0,0) 上绘制的。

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

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

感谢您帮助我！

更新

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

对不起

编辑：错字

Edit2：错字

【参考方案1】：

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

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

【讨论】：

这也有效，但我的问题表述错误。但是我的问题已经解决了。谢谢！

【参考方案2】：

如果你想把它画在中心，你需要知道图像的宽度和高度。之后就变得容易了：

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

【讨论】：

这也有效，但我的问题表述错误。但是我的问题已经解决了。谢谢

【参考方案3】：

如果您像这样提供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 这是一个不错的答案。你能帮我这个***.com/questions/17487277/…提前谢谢:)

【参考方案4】：

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