티스토리 뷰

Develop/canvas

29. fillText() - 글자그리기

GuriZzang 2015. 8. 10. 15:33

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

'Develop > canvas' 카테고리의 다른 글

31. measureText() - 글자의 넓이 반환  (0) 2015.08.10
30. strokeText() - 라인으로 글쓰기  (0) 2015.08.10
29. fillText() - 글자그리기  (0) 2015.08.10
28. transform() - 회전  (0) 2015.08.10
27. scale() - 크기확대/축소  (0) 2015.08.10
26. rotate() - 회전하기  (0) 2015.08.10
댓글
댓글쓰기 폼
공지사항
Total
51,684
Today
5
Yesterday
37
링크
«   2020/10   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함