[HTML/HTML5] canvas 엘리먼트 : 텍스트 그리기

icodebroker HTML5 2024-06-19

■ canvas 엘리먼트에서 텍스트를 그리는 방법을 보여준다.

▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function process_loaded()
            {
                var canvas  = document.getElementById('canvas');
                var context = canvas.getContext('2d');

                context.font         = '40pt 궁서';
                context.textAlign    = 'left';
                context.textBaseline = 'top';

                context.fillText('텍스트', 50, 100);

                var length = context.measureText('텍스트').width;

                context.strokeText('텍스트', 50 + length + 20, 100);
            }
        </script>
    </head>
    <body onload="process_loaded();">
        <canvas id="canvas" width="400" height="400" />
    </body>
</html>

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

<!DOCTYPE html>

<html>

<head>

function process_loaded()

{

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

context.font = '40pt 궁서';

context.textAlign = 'left';

context.textBaseline = 'top';

context.fillText('텍스트', 50, 100);

var length = context.measureText('텍스트').width;

context.strokeText('텍스트', 50 + length + 20, 100);

}

</script>

</head>

</body>

</html>

2D CONTROL GRAPHICS HTML HTML5 JAVASCRIPT STRING