Javascript_09: canvas에서 텍스트(글자) 사용하기, 텍스트 가운데정렬

게임개발의 기초편에서 다음과 같이 draw내부에서 사용되는 함수들을 알아보았다

.getContext의 함수 (draw내부에서 사용)
색 정하기	fillStyle = 'color';		name, rgb(), #HEX
사각형 그리기	테두리만 존재	.strokeRect(x,y,width,height)	x,y = 좌표 width, height = 크기
	채워진 사각형	.fillRect(x,y,width,height)
	사각형 지우기	.clearRect(x,y,width,height)
패스로 그리기	패스 열기	.beginPath();	형식 ctx.beginPath();
	패스 시작점	.moveTo(x, y);
	연결하기	.lineTo(x,y);
	채우기	.fill();v

*게임 개발의 기초: https://devyoseph.tistory.com/17

게임 초기화면에 글씨를 넣어야하는데 생각해보니 사각형이나 원, 패스를 그리는 것 말고는 잘 모르고 있었다
관련 내용을 토대로 canvas 안에서 글씨를 만들고 정렬해보았다.

 

canvas에서 텍스트 그리기

기존 도형 그리기의 경우: 색 정해주기(fillStyle) → 좌표와 크기 (fillRect)

텍스트의 그리기(draw 메소드 내부)

1) ctx.font = "100px Gothic";    //크기, 글꼴
2) ctx.textAlign = "start" // 좌표기준 오른쪽 정렬
3) ctx.fillStyle = 'green';  //색
4) ctx.fillText("START", this.x, this.y);  //내용과 좌표

빨간색이 지정해준 좌표: this.x, this.y

 

텍스트 가운데 정렬

canvas 내에서 글자를 사용할 때, 깔끔하게 보이기 위해 웬만하면 가운데 정렬을 해야하게 된다

1) 중심좌표를 설정하고(계산하고)

2) textAlign = "center"를 통해 폰트를 정렬한다

사각형을 그릴 때와는 달리 글자크기는 계산식으로 넣을 수 없다(ctx.font = "20pxGothic"; )는 걸 명심하자
ctx.textAlign = "정렬기준"; 의 값 외에 텍스트에서 사용되는 속성들이다.

텍스트 그리기	굵기, 크기, 글꼴	.font = "bold 20px gothic";
	정렬	.textAlign = "start"; //center, end, left...
	색	.fillStyle = 'green';
	좌표와 내용	.fillText("START", this.x, this.y);

정렬값들을 사용해보면 textAlign의 center말고는 늘 어디론가 치우치게 된다
네모를 그릴 때 시작점좌표로는 도저히 가운데 정렬을 할 수 없으므로 네모 자체의 가운데 좌표를 가져와야 한다

ctx.font = "120px gothic";
//글자는 기준점을 기준으로 중앙에 온다
ctx.textAlign = "center";
//중앙 좌표를 계산하여 넣는다
ctx.strokeText("START", this.centerX, this.centerY);