Develop/canvas

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

GuriZzang 2015. 8. 10. 15:34

GuriZzang.com에 오시면 

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


Syntax

ctx.measureText(text);

Parameters

text
The text to measure.

Return value

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