캔버스(canvas)를 이용한 도형 그리기

Canvas API

 

1. 텍스트 그리기

🔹 fillText(text, x, y [, maxWidth]): 지정한 위치에 텍스트를 채워서 그립니다.

🔹 strokeText(text, x, y [, maxWidth]): 지정한 위치에 텍스트의 윤곽선을 그립니다.

 

2. 텍스트 스타일 설정

🔹 font: 텍스트의 폰트 스타일 설정. 

        ctx.font = '48px serif

🔹 textAlign: 텍스트의 정렬 방식을 설정.

        가능한 값으로는 start, end, left, right, center가 있습니다. 기본값은 start입니다.

🔹 textBaseline: 텍스트의 기준선을 설정합니다.

       가능한 값으로는 top, hanging, middle, alphabetic, ideographic, bottom이 있습니다. 기본값은 alphabetic입니다.

 

3. 캔버스 랜더링 방법

🔹 fillText(text, x, y [, maxWidth])
주어진 (x, y) 위치에 주어진 텍스트를 채웁니다. 최대 폭(width)은 옵션 값 입니다.
🔹 strokeText(text, x, y [, maxWidth])
주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)합니다. 최대 폭(width)은 옵션 값 입니다.

 

4. 확인하기

🔹 measureText()

현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는 TextMetrics 객체 리턴.

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

 

 

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 채워진 사각형 그리기
        ctx.fillStyle = 'blue';
        ctx.fillRect(50, 50, 100, 100);

        // 윤곽선 사각형 그리기
        ctx.strokeStyle = 'red';
        ctx.strokeRect(200, 50, 100, 100);

        // 경로를 이용한 삼각형 그리기
        ctx.beginPath();
        ctx.moveTo(150, 200);
        ctx.lineTo(100, 300);
        ctx.lineTo(200, 300);
        ctx.closePath();
        ctx.fillStyle = 'green';
        ctx.fill();

        // 텍스트 그리기
        ctx.font = '24px Arial';
        ctx.fillStyle = 'black';
        ctx.fillText('Canvas에 텍스트 그리기', 50, 350);
    </script>

 

---

WHATWG (웹 하이퍼텍스트 애플리케이션 기술 작업 그룹 ) : HTML 및 관련 기술의 발전에 관심이 있는 사람들의 커뮤니티

https://whatwg.org/

---

출처

캔버스 위에 그림 그리기

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

텍스트 그리기

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text