如何在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保持在相同的位置上，但圖像將被吸引「圍繞」該中心。