20. HTML5 Canvas [metrix, measureText]

Hello Canvas!!

How to use metrix, measureText

소스보기해서 주석을 읽어보자

[SOURCE VIEW]

<canvas id = "myCanvas" width = "600" height = "400" style = "border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2 - 10; var text = 'Hello World!'; context.font = '50pt Calibri'; context.textAlign = 'center'; context.strokeStyle = 'blue'; context.strokeText(text, x, y); // get text metrics var metrics = context.measureText(text); //문자열의 너비를 계산하는 함수 를 metrix 변수에 대입 var width = metrics.width; context.font = '20pt Calibri'; context.textAlign = 'center'; context.fillStyle = '#555'; context.fillText('(' + width + 'px wide)', x, y + 40); //width 에 metrics.width값이 전달된다. </script> </code>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas