티스토리 뷰

Develop/canvas

31. measureText() - 글자의 넓이 반환

GuriZzang 2015. 8. 10. 15:34

GuriZzang.com에 오시면 

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


Syntax

ctx.measureText(text);

Parameters

text
The text to measure.

Return value

A TextMetrics object.




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' 카테고리의 다른 글

33 .clip() - 잘라내기  (0) 2015.08.10
32. globalCompositeOperation - 색상 블렌딩모드 (합성)  (0) 2015.08.10
31. measureText() - 글자의 넓이 반환  (0) 2015.08.10
30. strokeText() - 라인으로 글쓰기  (0) 2015.08.10
29. fillText() - 글자그리기  (0) 2015.08.10
28. transform() - 회전  (0) 2015.08.10
TAG
, , , , , , , , , , ,
댓글
댓글쓰기 폼
1 ··· 19 20 21 22 23 24 25 26 27 ··· 78
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
61,095
Today
8
Yesterday
59
링크
TAG more
«   2021/05   »
일 월 화 수 목 금 토
            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          
글 보관함