21

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

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

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

谢谢你的协助!

更新

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

对此感到抱歉

编辑:错字

编辑2:错字

4

4 回答 4

48

如果您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/

于 2013-05-01T12:28:52.703 回答
8

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

//var canvas = document.getElementById("yourCanvasElementID");
var img = arrPhoto[currentIndex];
canvasContent.drawImage(img, (canvas.width-img.width)/2, (canvas.height-img.height)/2);
于 2013-05-01T12:25:19.177 回答
1

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

drawImage(image, image.width/2, image.height/2)
于 2013-05-01T12:23:27.290 回答
0

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

于 2021-02-27T17:30:39.203 回答