준호씨의 블로그

javascript - canvas 에 텍스트 그리기 응용. outline 만들기. 본문

개발이야기

javascript - canvas 에 텍스트 그리기 응용. outline 만들기.

준호씨 2019. 1. 1. 23:16
반응형
  • 텍스트에 outline 효과를 주고 싶으면 strokeText 를 이용하면 된다.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas Example</title>

    <style>
        #my_canvas {
            border: 1px solid grey;
        }
    </style>

</head>
<body>
<canvas id="my_canvas" width="600" height="80"></canvas><br>
<input id="draw_text" value="안녕하세요.">
</body>

<script>
    document.getElementById("draw_text").addEventListener("keyup", function() {
        var canvas = document.getElementById("my_canvas");
        var context = canvas.getContext("2d");
        context.clearRect(0, 0, canvas.width, canvas.height);

        var text = document.getElementById("draw_text").value;
        var x = 20;
        var y = 50;

        context.font = "40pt BM YEONSUNG OTF";
        context.lineWidth = 10;
        context.strokeText(text, x, y);

        context.fillStyle = 'white';
        context.fillText(text, x, y);
    });

    document.getElementById("draw_text").dispatchEvent(new Event('keyup'));
</script>

</html>

image

테두리 색은 기본 black 이다. 만약 바꾸고 싶으면 strokeStyle 값을 바꿔 주면 된다.

context.strokeStyle = 'black';
반응형

'개발이야기' 카테고리의 다른 글

일일 커밋 80일째. 2015년엔 실패 했었지만 2018년엔 그럭저럭 잘 했는듯?  (0) 2019.01.03
javascript - canvas 에 strokeText 하니까 삐죽삐죽 가시가 튀어 나올때는?  (0) 2019.01.02
javascript - canvas 에 텍스트 그리기  (0) 2018.12.31
nodejs - mysql 사용시 "Error: Connection lost: The server closed the connection." 오류 나면서 죽는 문제 해결  (0) 2018.11.02
html - 파일명 실수를 줄이려면 한글이나 공백은 쓰지 않는것이 좋다.  (0) 2018.11.01
공유하기 링크
'개발이야기' Related Articles more
Comments