HTML - 캔버스 텍스트 그리기

캔버스에 문자열을 사용하려면 다음 표의 프로퍼티와 메서드를 사용합니다.

프로퍼티	설 명
font	글꼴 값을 얻거나 설정. 기본값: 10px sans-serif (CSS font 속성과 동일한 구문을 사용)
textAlign	가로 정렬 값을 얻거나 설정. 기본값: start start: 요소의 앵커포인트  left to right. 텍스트의 왼쪽 가장자리가 기준  right to left. 텍스트의 오른쪽 가장자리가 기준 end: 요소의 앵커포인트  left to right. 텍스트의 오른쪽 가장자리가 기준  right to left. 텍스트의 왼쪽 가장자리가 기준 left: 텍스트의 왼쪽 가장자리가 기준 right: 텍스트의 오른쪽 가장자리가 기준 center: 가운데 기준
textBaseline	세로 정렬 값을 얻거나 설정. 기본값: alphabetic top: em박스의 세로 상단이 기준 hanging: hanging 기준선이 기준  주로 인도 등에서 사용 middle: em박스 세로 가운데가 기준 alphabetic: 영문 알파벳 글자 기준선이 기준 ideographic: 표의 문자의 기준선이 기준  주로 일본어와 중국어에서 사용 bottom: em박스의세로 하단이 기준
direction	텍스트 방향. 기본값: inherit tr, rtl, inherit 중 하나

메서드	설 명
fillText(str, x, y, [,mw])	외곽선 없는 채워진 텍스트를 캔버스에 바로 그리기 str: 텍스트 x: 캔버스에서 x좌표로 이동할 거리 y: 캔버스에서 y좌표로 이동할 거리 mw: 최대 너비(maxWidth) 선택사항 mw 가 지정된 경우 텍스트는 mw 폭 크기에 맞게 조정된 텍스트를 채움.
strokeText(str, x, y, [,mw])	외곽선만 있는 텍스트를 캔버스에 바로 그리기 str: 텍스트 x: 캔버스에서 x좌표로 이동할 거리 y: 캔버스에서 y좌표로 이동할 거리 mw: 최대 너비(maxWidth). 선택사항 mw 가 지정된 경우 텍스트는 mw 폭 크기에 맞게 조정된 텍스트를 채움
measureText()	지정된 텍스트의 너비를 픽셀 단위로 반환 캔버스에 쓰기 전에 텍스트의 폭을 알아야 할 때 사용 Ex.) context.measureText( text ).width;

텍스트 그리기

문자열을 그리려면 fillText() 나 strokeText() 를 사용합니다. 아래 예제는 간단하게 문자열을 그렸습니다.

<style>
canvas {
  width: 300px;
  height: 250px;
  border: 1px solid black;
}
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');


context.font = "30px san-serif";
context.textAlign = "center";
context.fillText("안녕 하보니", 300,100,200);
</script>

텍스트 정렬 지정

문자열을 정렬하는 방법에는 아래 예제와 같이 지정이 가능합니다.

<style>
canvas {
  width: 300px;
  height: 250px;
  border: 1px solid black;
}
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');


var text = "안녕 하보니";
context.font = "30px san-serif";
context.textAlign = "center";
context.textBaseline = "bottom";
context.fillStyle = "#00f";
context.strokeStyle = "#f00";
context.fillText(text, 300,100,200);
</script>

가로 정렬은 아래 그림을 참조합니다.

세로 정렬은 아래 그림을 참조합니다.

measureText()

지정된 텍스트의 너비를 알아야 하는 경우에 사용됩니다.

<style>
canvas {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');

// 가로 크기 160.546875
context.font = "30px san-serif";
var txt = "안녕 하보니";
context.fillText("width: " + context.measureText(txt).width, 10, 50);
context.fillText(txt, 10, 100);
</script>