HTML5 텍스트 삽입하기

HTML5 텍스트 삽입하기

 

텍스트를 삽입하는 메서드는 fillText( ) 메서드와 strokeText( ) 메서드가 있습니다.

fillText( ) 메서드와 strokeText( ) 메서드에서  maxWidth 인수 값은 생략이 가능합니다.

maxWidth 값은 지정한 문자열의 최대 가로폭을 지정한다는 의미를 가지고 있습니다.

 

텍스트 삽입 메서드

메서드	설명
fillText(text, x, y[, maxWidth])	색이 채워진 텍스트를 삽입함
strokeText(text, x, y[, maxWidth])	테두리만 있는 텍스트를 삽입함

 

텍스트 삽입 형식

형식

context.fillText(글자, x, y[, 최대너비]); context.strokeText(글자, x, y[, 최대너비]);

예제

context.font = "40pt  굴림체";     context.fillText("대한민국", 100, 100);            //  색이 채워진 텍스트를 삽입함  context.strokeText("대한민국", 100, 200);    //  테두리만 있는 텍스트를 삽입함

 

텍스트 삽입 속성

속성	설명
font	글꼴이나 글자 크기를 지정함
textAlign	가로 방향의 정렬을 지정함 (left, right, center, start, end)
textBaseline	기준선 지정 (top, hanging, middle, alphabetic, ideographic, bottom)

 

텍스트 정렬과 기준선 형식

형식

context.font = 글자 스타일; context.textAlign = 가로 방향 정렬; //  정렬 값  지정: left, right, center, start, end  context.textBaseline = 기준선;       //  기준선 지정: top, hanging, middle, alphabetic, ideographic, bottom

예제

context.font = "bold 40pt  굴림체";                 //  글자 스타일 지정함 context.textAlign = 'left';                                    //  가로 방향 정렬 지정함  context.textBaseline = 'top';                             //  기준선 지정함 context.fillText("대한민국", 200, 100); context.font = "italic 50pt  궁서체";                //  글자 스타일 지정함  context.textAlign = 'center';                             //  가로 방향 정렬 지정함  context.textBaseline = 'bottom';                    //  기준선 지정함  context.strokeText("대한민국", 200, 200);

 

텍스트 삽입 실습 프로그램