如何在Javascript中获取图像的中心？

Question

我正在制作一个我有物体移动的物体，每个物体都附有一个图像，但我不知道如何将它们从中心移动到左上角。

这是玩家：

function Player() { 
    this.height = 167.5; 
    this.width = 100; 
    this.pos_x = 350; 
    this.pos_y = 425; 
    this.player_image = new Image(); 
    this.player_image.src = 'img/player_car_img.png'; 
}; 

及方法“移动”：

Player.prototype.move = function(){ 
    if (37 in keysDown) { 
     this.pos_x -= 10; 
    } else if (39 in keysDown) { 
     this.pos_x += 10; 
    } 
}; 

Answer 1

我不知道你在哪里绘制这个形象，但我已经使用了你拥有并简单地将图像绘制在不同的位置。

您可以通过从初始位置起飞的图像尺寸的一半，像这样绘制图像在你的位置（Player.pos_x和Player.pos_y为中心点，而不是左上）：

Y = Y location - (image height/2) 
X = X location - (image width/2) 

在实际这个代码看起来是这样的：

var x = Player.pos_x - Player.player_image.width/2; 
var y = Player.pos_y - Player.player_image.height/2; 
ctx.drawImage(Player.player_image, x, y); 

这样，你的Player.pos_x和Player.pos_y保持在相同的位置上，但图像将被吸引“围绕”该中心。