座標を中心とした矩形の描画

Question

現在、HTML5-Canvas上に小さなゲームを構築しています。プレーヤーは長方形をコントロールし、長方形はその方向に線を描きます。私は矩形の移動方法の座標を保存し、それらから線を作成しています。問題は、矩形の座標が左上隅の位置であることです。その座標に中心がある矩形を描画する方法はありますか？

Answer 1

だけで四角形を描画関数に新しいcordinatesを渡す：

newX = x - width/2 
newY = y - height/2 

例：

function fillRectCentered(context, x, y, width, height) { 
    context.fillRect(x - width/2, y - height/2, width, height); 
}