1-4. 텍스트 그리기 - Canvas API | MDN
이전 챕터에서 스타일과 컬러를 적용하는 방법에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다.
텍스트 그리기
캔버스 렌더링 컨텍스트(canvas rendering context)는 텍스트를 렌더링하는 두 가지 방법을 제공합니다.
-
fillText(text, x, y [, maxWidth]) : 주어진 (x, y) 위치에 주어진 텍스트를 채웁니다. 최대 폭(width)은 옵션 값 입니다.
-
strokeText(text, x, y [, maxWidth]) : 주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)합니다. 최대 폭(width)은 옵션 값 입니다.
fillText 예제
텍스트는 현재의 fillStyle을 사용하여 채워집니다.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px serif';
ctx.fillText('Hello world', 10, 50);
}
strokeText 예제
텍스트는 현재의 strokeStyle을 이용하여 채워집니다.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px serif';
ctx.strokeText('Hello world', 10, 50);
}
텍스트 스타일 적용하기
위의 예제에서 우리는 이미 텍스트를 기본 사이즈를 키우기 위하여 font 프로퍼티를 사용하였습니다. 그리고 캔버스에 표시되는 텍스트를 조정할 수 있는 속성이 더 있습니다.
-
font = value : 텍스트를 그릴 때 사용되는 현재 텍스트 스타일. 이 문자열은 font 프로퍼티와 동일한구문을 사용합니다. 기본값으로 sans-serif의 10px가 설정되어 있습니다.
-
textAlign = value : 텍스트 정렬 설정. 사용가능한 값: start, end, left, right, center. 기본 값은 start 입니다.
-
textBaseline = value : 베이스라인 정렬 설정. 사용가능한 값: top, hanging, middle, alphabetic, ideographic, bottom. 기본 값은 alphabetic 입니다
-
direction = value : 글자 방향. 사용가능한 값: ltr, rtl, inherit. 기본 값은 inherit 입니다.
만약 CSS를 다뤄보신적이 있다면 이러한 프로퍼티들은 익숙하실겁니다.
다음에 나오는 WHATWG 예제 다이어그램은 textBaseline를 이용하여 다양한 베이스라인 설정을 보여줍니다.
어드밴스드 텍스트 측정
만약 텍스트에대해 조금 더 디테일한 것들을 얻고 싶다면 다음의 메소드를 이용해보세요.
-
measureText() : 현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는 TextMetrics 객체 리턴.
다음의 코드는 어떻게 텍스트를 측정하는 지, 그리고 폭을 구하는 예제입니다.
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText('foo'); // TextMetrics object
console.log(text.width); // 16;
}
Gecko 사용시 주의점
Gecko(Firefox, Firefox OS외 Mozilla 기반의 에플리케이션 렌더링 엔진)에서는 캔버스에 텍스트를 그리기 위한 몇몇의 prefixed APIs가 구현되어 있습니다. 그리고 지금은 사용되지 않아 제거되었거나 작동을 보장하지 않는 것들도 있습니다.