在画布的中间绘制图像

Draw images on in the middle of a canvas

本文关键字：绘制 图像 中间      更新时间：2023-09-26

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

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

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

谢谢你的帮助!

我可能把问题提错了一点。我的意思是:我希望图像的中间位于画布的中间，而不是图像的顶部。

对不起

编辑:输入错误

Edit2:错误

如果您像这样提供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/.

如果你想把它画到中间，你需要知道图像的宽度和高度。之后就容易了:

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

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

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

如果你想让它在中心，你正在重新缩放图像，它从顶部的角落缩小，但中心点保持不变。如果你用JavaScript调整图像的大小，你不应该这样做，而只是编辑图像，使其更小/更大。

相关文章：