[JavaScript] 캔버스에 텍스트 그리기

캔버스에 텍스트를 생성하면 비트맵 이미지로 출력되므로 쓴다기보다는 그린다는 것이 옳다. 따라서 캔버스에서 텍스트만 지우거나 뗴어 내어 옮기는 것은 불가능하다.

 

/* 텍스트의 외곽선만 그리기 */
strokeText(text, x, y [,maxWidth]);

/* 외곽선 없이 텍스트 내부 채워 그리기 */
fillText(text, x, y [,maxWidth]);

• text : 출력하고자 하는 문자열 텍스트
• x, y : 텍스트가 출력되는 시작 점 (x, y)
• maxWidth : 텍스트가 출력되는 최대 폭
  

 

주요 프로퍼티

strokeStyle	strokeText() 에서 외곽선 색 정할 때 사용하는 프로퍼티
fillStyle	fillText() 에서 텍스트 내부 색 정할 때 사용하는 프로퍼티
font	context.font = "italic 20px arial"
textAlign	left(디폴트), right, center, start, end 중 한 값을 지정하여 출력 위치를 정할 수 있다

 

/* 텍스트 외곽선 그리기 */
context.font = "italic 50px forte";
context.strokeStyle = "magenta";
context.lineWidth = 3;
context.textAlign = "left";
context.strokeText("Javascript 재밌다.", 50, 250);

 

/* 텍스트 채워 그리기 */
context.fillStyle = "green";
context.textAlign = "right";
context.fillText("Javascript 재밌다.", 490, 300);