HTML5 | canvas 에 텍스트 출력하기

텍스트 출력하기

HTML5로 canvas에 텍스트를 출력한다.

먼저 HTML5 코드를 body 안에 넣는다. canvas 의 위치는 항상 상단에 있는게 아니라 body 안의 box 상황에 따라 정해진다.

<body onload="pageLoad();">  
  <canvas width="540" height="480" id="testcanvas" style="border: 1px solid lightblue;">
        Your browser does not support HTML5 Canvas. Please shift to a newer browser.
        </canvas>
</body>

그런 다음 자바 스크립트에서 DOM 객체 canvas의 인스턴스를 가져온다. 캔버스는 ID로 지정하는게 안전하다.

컨텍스트는 2D 그래픽을 다루기 위한 인스턴스를 만드는 것이다. context 인스턴스를 통해 웹브라우저 안에서 픽셀 좌표계를 조작할 수 있다. 사각형이나 원호 등의 그래픽을 그릴 수 있다.

    var canvas = document.getElementById("testcanvas");
    var context = canvas.getContext("2d");

이제 context 를 사용해서 텍스트를 출력해보자. Canvas는 그래픽을 사용할 수 있는 객체기 때문에 일반 텍스트와는 다르게 취급한다. 매개변수로 문자열 뿐만 아니라 캔버스 상의 x y 좌표가 필요하다.

    var text = "Hello Canvas!";

    context.font ="40pt Fira";
    context.strokeText(text, 50, 100);

* strokeText는 텍스트를 폰트의 외곽선을 따라서 그린다. 문자열 다음의 매개변수는 x y 좌표다.

    context.fillStyle = "rgb(250, 100, 100)";
    context.fillText(text, 100, 200);

fillText는 안쪽을 채운다. rgb 스타일을 설정할 수 있다.

두개를 다 적용하면 외곽선과 안쪽이 채워진 텍스트를 얻는다.

    context.strokeText(text, 50, 300);
    context.fillText(text, 50, 300);

    context.font ="40pt 바탕체";
    context.strokeText("한글 바탕체", 50, 400);

한글 폰트도 잘 지원된다. 시스템 폰트에서 사용했다.

스타일 적용하기

HTML5에서는 fillStyle과 strokeStyle 두가지 방법으로 스타일을 줄 수 있다. rgba 에 알파값(투명도)도 줄 수 있다.

* strokeStyle, fillStyle

    context.font ="50pt 바탕체";
    context.strokeStyle = "green"
    context.strokeText("한글 바탕체", 50, 400);

    context.fillStyle = "rgb(0, 100, 100, 0.4)";
    context.fillText("한글 바탕체", 50, 400);

* 텍스처 스타일로 사용할 수도 있다.

    var flowers = document.getElementById("flowers");
    var pattern = context.createPattern(flowers, "repeat");
    context.fillStyle = pattern;
    
    context.fillRect(200, 200, 100, 100);
    context.strokeText("텍스처 Fill", 50, 500);
    context.fillText("텍스처 Fill", 50, 500);