좌표가 중심에있는 사각형을 그립니다.

Question

현재 HTML5- 캔버스에 작은 게임을 만들고 있습니다. 플레이어가 직사각형을 제어하면 직사각형이 선을 그립니다. 직사각형이가는 방식의 좌표를 저장하고 그것들에서 선을 만듭니다. 문제는 사각형의 좌표가 좌상 구석의 위치라는 것입니다. 좌표가있는 사각형을 그리는 방법이 있습니까?

Answer 1

은 그냥 사각형을 그리는 함수에 새로운 좌표, 전달 :

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); 
}