캔버스에 문자열 삽입하기 HTML5



캔버스에 문자열을 삽입하는 방법에 대해 살펴보자.

 

 

- fillText(text, x, y, maxWidth) / strokeText(text, x, y, maxWidth)

  이름에서 볼 수 있듯이 채워진 텍스트와 빈텍스트를 출력하는 메서드이다.

  마지막 인자인 maxWidth는 최대가로길이를 지정하는 인자이다.

 

- font

  CSS에서의 font 속성과 같으며, 글꼴과 크기 등을 지정한다.

 

- textAlign

  문자열의 가로 방향 표시위치를 지정한다.

  left / right / center / start / end 로 지정이 가능하다.

 

- textBaseline

  텍스트가 표시되는 위치의 기준선을 지정한다.

  strokeText(), fillText()의 인수로써 지정된 좌표에 대해

  top, hanging, middle, alpahbetic, ideographic, bottom 등으로 지정이 가능하다.

 

 

현재 폰트에 대한 정보를 얻는 메서드도 존재한다.

 

        measureText(text)

 

이 메서드의 반환값은 TextMetrics 형태의 객체로, 현재 스펙에서는 width 라는 속성만을 가지고 있다.

이 속성의 값으로 text에 대해 실제 삽입될때 필요한 가로너비를 구할 수 있다.

예제를 보자.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="500" height="500"></canvas>

 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");

 var msg = "안녕하세요!";
 var textHeight = 32;

 context.font = textHeight + 'px  "맑은 고딕"';

 var textWidth = context.measureText(msg).width;

 context.fillStyle = "pink";
 context.fillRect(0, 0, textWidth, textHeight);

 context.fillStyle = "black";
 context.textBaseline = "bottom";
 context.fillText(msg, 0, textHeight);
 //-->
 </SCRIPT>

</BODY>
</HTML>

 

위 예제에서는 msg에 텍스트를 넣어준뒤, 해당 문자열이 얼만큼의 너비를 필요로 하는지 계산한다.

이 계산에서 measureText() 라는 메서드가 이용되고 있으며, 텍스트의 너비와 높이만큼의 핑크색 사각형을 그려낸다.

 

사각형을 그리고, 다시 칠할 색상을 검정색으로 변경한 뒤에 정렬값을 bottiom으로 설정한다.

정렬된 위치에서 fillText() 메서드를 이용하여 텍스트를 출력해준다.

결과를 보자.

 


덧글

댓글 입력 영역


통계 위젯 (화이트)

1522
132
358625

red 210