텍스트 그리기
이전 챕터에서스타일과 컬러를 적용하는 방법에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다.
텍스트 그리기
캔버스 렌더링 컨텍스트(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);}<canvas width="300" height="100"></canvas>draw();strokeText 예제
텍스트는 현재의strokeStyle을 이용하여 채워집니다.
function draw() { var ctx = document.getElementById("canvas").getContext("2d"); ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50);}<canvas width="300" height="100"></canvas>draw();텍스트 스타일 적용하기
위의 예제에서 우리는 이미 텍스트를 기본 사이즈를 키우기 위하여font 프로퍼티를 사용하였습니다. 그리고 캔버스에 표시되는 텍스트를 조정할 수 있는 속성이 더 있습니다.
font = value텍스트를 그릴 때 사용되는 현재 텍스트 스타일. 이 문자열은CSS
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를 이용하여 다양한 베이스라인 설정을 보여줍니다.
textBaseline 예제
아래의 코드를 수정하여 캔버스에서 어떻게 바뀌는지 실시간으로 확인해 보세요.
ctx.font = "48px serif";ctx.textBaseline = "hanging";ctx.strokeText("Hello world", 0, 100);<canvas width="400" height="200"></canvas><div> <input type="button" value="Edit" /> <input type="button" value="Reset" /></div><textarea>ctx.font = "48px serif";ctx.textBaseline = "hanging";ctx.strokeText("Hello world", 0, 100);</textarea>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var textarea = document.getElementById("code");var reset = document.getElementById("reset");var edit = document.getElementById("edit");var code = textarea.value;function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value);}reset.addEventListener("click", function () { textarea.value = code; drawCanvas();});edit.addEventListener("click", function () { textarea.focus();});textarea.addEventListener("input", drawCanvas);window.addEventListener("load", drawCanvas);어드밴스드 텍스트 측정
만약 텍스트에대해 조금 더 디테일한 것들을 얻고 싶다면 다음의 메소드를 이용해보세요.
measureText()현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는
TextMetrics객체 리턴.
다음의 코드는 어떻게 텍스트를 측정하는 지, 그리고 폭을 구하는 예제입니다.
function draw() { var ctx = document.getElementById("canvas").getContext("2d"); var text = ctx.measureText("foo"); // TextMetrics object text.width; // 16;}Gecko 사용시 주의점
Gecko(Firefox, Firefox OS외 Mozilla 기반의 에플리케이션 렌더링 엔진)에서는 캔버스에 텍스트를 그리기 위한 몇몇의prefixed APIs가 구현되어 있습니다. 그리고 지금은 사용되지 않아 제거되었거나 작동을 보장하지 않는 것들도 있습니다.