6. Text

6. Text    

이제 캔버스(canvas)에서 텍스트(Text)를 사용하는 방법에 대해 알아봅니다.
Text와 관련된 context의 메서드들을 나타내면 다음과 같습니다.

메서드	기능
fillText(text, x, y [, maxWidth])	기본 검은색으로 입력 파라미터인 (x, y) 좌표점에 텍스트를 채워 그립니다. 옵션으로 maxWidth 값을 설정하면 텍스트의 최대 너비를 설정
strokeText(text, x, y [, maxWidth])	기본 검은색으로 입력 파라미터인 (x, y) 좌표점에 텍스트를 채우지 않고 그립니다. 옵션으로 maxWidth 값을 설정하면 텍스트의 최대 너비를 설정
measureText(text)	text의 너비를 포함하는 객체를 반환

“basic.html” 파일을 메모장으로 연 후 “// canvas에 그릴 선이나 도형 작성” 밑에 다음과 같이 코드를 작성합니다.

      // canvas에 그릴 선이나 도형 작성
      var theString = "여기는 대한민국입니다.";
      context.fillText(theString, 10,10);
      context.fillText(theString, 10,20,50);

위와 같이 작성한 후 다른 이름으로 저장을 이용하여 “textEx.html”로 저장합니다. 그 다음 IE9를 통해 열어보면 다음과 같이 나타나게 됩니다.

위의 결과를 통해 fillText() 메서드를 maxWidth 옵션을 사용하지 않을 때와 사용할 때의 차이점을 구분할 수 있을 것입니다.

다음으로 strokeText() 메서드에 대해서 보면 방금 전 사용한 “textEx.html”을 메모장으로 열어서 방금 전 사용한 코드를 주석처리(//) 한 후 다음과 같이 해당 부분에 코드를 추가합니다.
      //context.fillText(theString, 10,20,50);

      var theString = "여기는 대한민국입니다.";
      context.font = "20pt Century Gothic"
      context.strokeText(strMessage, 10,50);

위에서 font 속성을 이용하여 폰트를 크기가 20pt이고 Century Gothic으로 설정한 후 stroke() 메서드를 이용하여 화면에 나타내도록 하였습니다.
다른 이름으로 저장을 선택하여 “stokeTextEx.html”로 저장하고 IE9를 통해 보면 다음과 같이 나타납니다.

위와 같이 텍스트 테두리를 기본색인 검정색(black)으로 칠해서 나타내게 되는데 만일 파란색으로 칠할 경우는 context의 stroke 속성을 이용하여 다음과 같이 지정해주면 됩니다.

      context.font = "20pt Century Gothic"
      context.strokeStyle=”blue”;
      context.strokeText(strMessage, 10,50);

strokeText() 메서드 사용 예에서 보는 것처럼 텍스트 테두리를 원하는 색으로 설정이 가능하다 하더라도 그 내부는 그대로 흰색입니다. 만일 텍스트 테두리와 텍스트 테두리 내의 색상을 각각 설정할 경우에는 fillStyle 속성과 fillText() 메서드를 포함하여 다음과 같이 설정하여 주면 됩니다.

      context.font = "20pt Century Gothic";
      context.fillStyle="red";
      context.strokeStyle="yellow";
      context.fillText(strMessage, 10,50);
      context.strokeText(strMessage, 10,50);

위와 같이 작성한 후 저장한 후 브라우저를 통해서 보면 다음과 같이 나타납니다.

마지막으로 Text 관련한 메서드들 중 measureText() 메서드의 사용방법을 알아볼까요?
measureText() 메서드의 입력 파라미터로 사용된 text의 너비를 포함하는 객체를 반환하므로 보통 measureText() 메서드는 캔버스(canvas)에 텍스트를 쓰기에 앞서 해당 텍스트의 너비(width)가 얼마 정도 되는지 알아야 할 필요가 있을 때 사용합니다. 메모장으로 “stokeTextEx.html” 문서를 열고 기존 코드의 밑에 다음 코드들을 작성합니다.

      context.strokeText(strMessage, 10,50);

 

      context.fillText("strMessage 텍스트의 너비:" + context.measureText(strMessage).width,10,100);

저장한 후 IE9로 연결하여 확인하면 다음과 같이 나타납니다.

다음으로 Text와 관련된 context의 속성으로는 다음과 같이 3 가지 형태가 존재합니다.

context.font= 값
context.textAlign= 값
context.textBaseline=값

위에서 보는 것처럼 첫 번째 font 속성은 글자색 및 글자 크기 등을 설정할 때 사용하는 속성으로 CSS font 속성(property)와 동일합니다.
두 번째 textAlign 속성은 텍스트의 가로 시작 위치를 설정하는데 사용하는 속성으로 start, end, left, right, center 5가지 속성값들 중 하나를 지정할 수 있으며 기본값은 start입니다. 다른 속성값들은 기본적으로 이해가 갈 것인데 start, end는 설명이 필요할 것 같은데 실제로 start 는 left로 설정되었을 때와 같은 결과를 나타내고 end는 right로 설정되었을 때와 같은 결과를 그리게 됩니다.

메모장으로 “basic.html” 문서를 열고 “// canvas에 그릴 선이나 도형 작성” 부분 밑에 다음과 같이 코드를 작성합니다.

      // canvas에 그릴 선이나 도형 작성

      var strMessage = "여기는 대한민국입니다.";

      context.textAlign="start";     

      context.fillText(strMessage, 200, 50);       

      context.textAlign="end";     

      context.fillText(strMessage, 200, 70);                 

      context.textAlign="left";     

      context.fillText(strMessage, 200, 90);

      context.textAlign="center";    

      context.fillText(strMessage, 200, 110);             

      context.textAlign="right";     

     context.fillText(strMessage, 200, 130);

다른 이름으로 저장을 선택하여 “TextAlignEx.html”로 저장하고 IE9로 연결하여 보면 방금 전 설명한 내용을 이해할 수 있을 것입니다.

세 번째 textBaseline 속성은 텍스트(Text)의 수직 정렬과 관련된 속성으로 다음과 같은 속성값을 취할 수 있습니다.

속성값	의미
top	em 사각형의 최상단에 위치
hanging	top과 middle 사이에 위치
middle	em 사각형의 중간에 위치
alphabetic	알파벳의 기준선에 위치. Middle과 ideographic의 중간
ideographic	한자 같이 하나하나의 글자가 언어의 음과 상관없이 일정한 뜻을 나타내는 표의 문자의 정렬에 사용. alphabetic 바로 아래에 위치 정렬
bottom	em 사각형의 최하단에 위치

위에서 em은 상대적 크기를 나타내는 상대값으로 현재 글꼴 크기가 12px이면 1em은 12px을 나타내고 2em일 경우는 2*12 즉 24px을 나타내는 형태로 사용되는  수치 단위에 해당 크기의 사각형 안에 textBaseline 속성값에 따라 수직 정렬을 하게 됩니다.
이제 메모장으로 “basic.html” 문서를 열고 “// canvas에 그릴 선이나 도형 작성” 부분 밑에 다음과 같이 코드를 작성합니다.

      // canvas에 그릴 선이나 도형 작성
      var strMessage = "Hope";
      context.font="14px Century Gothic";
      context.textBaseline="top";

      context.fillText(strMessage,0,100);

      context.textBaseline="hanging";

      context.fillText(strMessage,50,100);

      context.textBaseline="middle";

      context.fillText(strMessage,100,100);

      context.textBaseline="alphabetic";

      context.fillText(strMessage,150,100);

      context.textBaseline="ideographic";

      context.fillText(strMessage,200,100);

      context.textBaseline="bottom";

      context.fillText(strMessage,250,100);

다른 이름으로 저장을 선택하여 “textBaseline.html”로 저장하고 IE9로 연결하여 보면 다음과 같이
나타납니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 Canvas에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.