29. fillText() - 글자그리기

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.

Drawing text

캔버스 영역에 텍스트를 그려 줍니다.

fillText(text, x, y [, maxWidth])

좌표 x,y를 시작으로 text를 그립니다. [maxWidth]는 생략가능하며 text 최대넓이를 제한합니다.

strokeText(text, x, y [, maxWidth])

좌표 x,y를 시작으로 text 라인을 그립니다. [maxWidth]는 생략가능하며 text 최대넓이를 제한합니다.

아래의 예제는 .fillText(), .strokeText(), measureText(), 최대넓이 지정순 입니다.

Source 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function draw() {     var ctx = document.getElementById('canvas').getContext('2d');           ctx.font = "48px serif";     ctx.fillText("Hello world", 10, 50);           ctx.font = "48px serif";     ctx.strokeText("Hello world", 10, 100);           ctx.font = "48px serif";     ctx.fillText(ctx.measureText("Hello world").width, 10, 150);           ctx.font = "48px serif";     ctx.fillText("Hello world", 10, 200, 100);       }

Demo