Canvas 위에 텍스트를 그려보자 🎼
안녕하세요! 두두코딩 입니다 ✋
오늘은 Canvas 위에 Text를 그리는 방법을 알아보고, 스타일을 꾸며보도록 하겠습니다!
🖇 소스코드에 마우스를 올리고 copy 버튼을 누를 경우 더 쉽게 복사할 수 있습니다!
궁금한 점, 보안점 남겨주시면 성실히 답변하겠습니다. 😁
+ 감상평 댓글로 남겨주시면 힘이됩니다. 🙇
텍스트 그리기
캔버스 랜더링 컨텍스트에서는 text를 랜더링 하기 위해 두 가지 방법을 제공한다.
🌱 fillText(text, x, y)
위의 함수는 주어진 x, y에 text를 채우도록 하는 함수이다. 옵션으로 최대 폭을 지정할 수도 있다.
🌱 strokeText(text, x, y)
위의 함수는 주어진 x, y에 text의 윤곽선을 칠하는 함수이다. 최대폭은 역시 지정이 가능하다.
fillText 예제
아래의 코드를 통해 fillText 함수의 예시를 보자.
See the Pen graphic by 13634816 (@13634816) on CodePen.
위의 코드를 보면, Text에 채워진 값을 볼 수 있을 것이다. 해당 코드는 (10, 50)를 시작점으로 Hello world라는 텍스트를 그릴 것이다. 후에 나오겠지만, 텍스트의 기본 사이즈는 10px이다. 해당 예시에서는 font size를 변경해 좀 더 크게 보이도록 했다.
strokeText 예제
아래의 코드를 통해 strokeText 함수의 예시를 보자.
See the Pen graphic by 13634816 (@13634816) on CodePen.
위의 결과를 보면, 글자가 채워져있지 않고 윤곽선만 있는 것을 확인할 수 있다.
우리가 이전에 배웠던, stroke와 fill의 차이를 그대로 글자에 반영하고 있다고 생각하면 쉽게 이해할 수 있다.
텍스트 스타일 적용하기
위의 예시에서 우리는 font 사이즈를 키우기 위해 font가 가지고 있는 프로퍼티를 활용하는 것을 확인하였다. 폰트 사이즈 외에 캔버스에 표시되는 텍스트를 조정할 수 있는 프로퍼티들이 더 존재한다. 한번 알아보자.
🌱 font = value
텍스트를 그릴 때 사용되는 현재 텍스트의 스타일과 크기를 바꿀 수 있는 프로퍼티이다. 기본 값으로 sans-serif와 크기는 10px로 고정되어져있다.
🌱 textAlign = value
텍스트 정렬을 설정할 때 사용하는 프로퍼티이다. 정렬할 수 있는 위치는 start, end, left, right, center 다양하게 존재한다. 기본값은 가장 왼쪽 start이다.
Tip textAlign의 start와 left는 동일한 값을 나타내는데 왜 구별 되어져있을까? 우리가 보통 사용하는 browser는 LTR을 기반으로 만들어진다. 즉, 왼쪽에서 오른쪽으로 text가 그려진다. 만약 RTL 즉, 오른쪽에서 왼쪾으로 그려지는 브라우저를 사용할 때, start 값은 오른쪽에서 시작하지만, left는 왼쪽에서 시작하도록 구현된다.
start값은 브라우저가 지정된 시작점을 기준으로 그려지는것을 잊지말도록하자.
🌱 textBaseline = value
텍스트 베이스라인을 지정할 때 사용한다. 베이스라인은 문자열이 수직으로 정렬되는 선을 의미한다. 이 선과 좌표의 관계를 정의할 때 사용한다.
베이스라인의 정렬값 (value)은 총 6개이다.
| 정렬 값 | 설명 |
|---|---|
| top | 베이스라인이 문자열 위쪽에 온다 |
| middle | 베이스라인이 문자열의 중앙에 온다 |
| bottom | 베이스라인이 문자열의 아래쪽에 온다 |
| alphabetic | 알파벳의 아래쪽에 맞춘다. 해당 값이 디폴트 값이다 |
| hanging | 문자의 위쪽에 맞춘다. 인도의 언어방식 |
| ideographic | 한자나 일본어 처럼 사각형 문자가 이 방식을 사용한다. 알파벳 보다는 베이스 라인이 약간 더 아래쪽에 위치한다 |
top, middle, bottom은 문자의 사각 영역의 어디쯤 좌표를 맞출 것인가를 물리적으로 지정할 수 있다. 하지만, 나머지 세 속성은 각 나라의 문자에 맞는 적당한 지점을 선택하도록 되어져있다. 영어권에서 인터넷을 가장 많이 사용함으로 기본 값이 alphabetic으로 구성되어져 있다.
🌱 derection = value
글자의 방향을 결정한다. textAlign에서 잠시 언급했듯이, LTR, RTL의 값을 지정하는 것이다. direction 값으로 inherit을 넣을 수 있으며, 부모의 값을 상속받아 결정하도록 할수도 있다. 기본값은 inherit으로 되어져있다.
textBaseline 예시
위의 속성값 중 textBaseline의 값을 변경해 테스트 해보자. textBaseline의 값은 기본 값으로 alphabetic이 지정되어져있다. 이를 hanging으로 변경해보자. 그리고 위의 예시(stroke 예시)와 어떤 변화가 있는지 알아보자.
See the Pen graphic by 13634816 (@13634816) on CodePen.
어드밴스드 텍스트 측정
만약 텍스트에 대해 조금 더 디테일한 정보들을 얻고 싶다면 아래의 함수를 이용하면 된다.
measureText()
- 현재 스타일로 특정 텍스트가 그려질 때 폭, 픽셀등을 포함하는 TextMetrics라는 객체를 반환하는 함수이다.
아래의 코드는 텍스트를 어떻게 측정하는지 그리고 폭을 어떻게 구하는지 알 수 있는 예시이다.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText('foo');
text.width; // 16;
}
위와 같이, (.) 연산을 통해 width를 얻어서 로그로 출력을 할 수 있다.
