Canvas(4)_텍스트 그리기

해당 게시글은 2022.03.10에 깃허브로 작성되었습니다.

 

---

 

캔버스 렌더링 컨텍스트는 텍스트를 렌더링하는 두가지 방법을 제공한다.

 

1. 텍스트 그리기

(1) fillText(text, x, y, [maxWidth])

주어진 (x, y) 위치에 주어진 텍스트를 채운다. 최대 폭(width)은 옵션 값이다.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.fillText('Hello world', 10, 50);
}

 

(2) strokeText(text, x, y, [ maxWidth])

주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)한다. 마찬가지로 최대 폭(width)은 옵션 값이다.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.strokeText('Hello world', 10, 50);
}

 

---

 

2. 텍스트 스타일 적용하기

(1) font = value

텍스트를 그릴 때 사용되는 현재 텍스트 스타일.

CSS font 프로퍼티와 동일한 구문을 사용한다. 기본값으로 sans-serif의 10px이 설정되어 있다.

 

(2) textAlign = value

텍스트 정렬 설정. 기본값은 start이다.

사용가능한 값
 start, end, left, right, center

 

(3) textBaseline = value

베이스라인 정렬 설정. 기본값은 alphabetic이다.

사용가능한 값
 top, hanging, middle, alphabetic, ideographic, bottom

 

(4) direction = value

글자 방향. 기본값은 inherit이다.

사용가능한 값
 ltr, rtl, inherit

 

---

 

 

이렇게 비교적 쉬웠던 텍스트에 대해 배워봤다.

다음에는 이미지 사용 방법에 대해 배워보자.