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が同じ位置にとどまるあなたのこの方法は、しかし、画像はその中央「を中心に」描かれます。