canvas API - 도형 그리기(basic)

그리드와 좌표

HTML 골격(skeleton)은 가로 세로 각각 150px의 캔버스 요소를 가지고 있다.

위의 그림을 보면, 캔버스와 기본 그리드가 놓인 것을 볼 수 있다.
기본적으로 그리드의 1단위는 캔버스의 1px과 같다.
이 그리드의 원점은 좌측상단의 (0, 0)이다.

모든 요소들은 원점을 기준으로 위치된다.
파란 사각형의 좌상단은 왼쪽에서 x, 오른쪽에서 y 픽셀 떨어진 것으로 볼 수 있다.
그러므로 사각형의 좌표는 (x, y)가 된다.

직사각형 그리기

canvas는 오직 하나의 원시적인 도형인 직사각형을 제공한다.
다른 모든 도형들은 무조건 하나 또는 하나 이상의 path와 여러 점으로 이어진 선으로 만들어진다.

아주 어려운 도형들은 내장 함수들을 통해 그릴 수 있다.

• fillRect(x, y, width, height)
  -> 색칠된 직사각형 그리기

• strokeRect(x, y ,width, height)
  -> 직사각형 윤곽선 그리기

• clearRect(x, y, width, height)
  -> 특정 부분을 지우는 직사각형. 지워진 부분은 투명해진다.

  ex)

    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.fillRect(25, 25, 100, 100);
        ctx.clearRect(45, 45, 60, 60);
        ctx.strokeRect(50, 50, 50, 50);
      }
    }
    

경로(path) 그리기

경로란 점들의 집합이다.
선의 한 부분으로 연결돼 여러가지 도형이나 곡선을 이루고, 두께나 색을 나타내게 된다.

경로를 이용하여 도형을 만들 때에는 몇 가지 단계가 있다.

1. 경로 생성
2. 그리기 명령어를 사용하여 경로상에 그리기
3. 경로가 한번 만들어지면, 경로를 렌더링 하기 위해 윤곽선을 그리거나, 도형 내부를 채울 수 있다.

경로 그리기 함수 (Path methods)

• beginPath()
  -> 새로운 경로를 만든다. 경로가 생성되었다면, 이후 그리기 명령들은 경로를 구성하고 만드는 데에 사용된다.
• closePath()
  -> 현재 하위 경로의 시작 부분과 연결된 직선 추가
• stroke()
  -> 윤곽선을 이용해 도형을 그린다
• fill()
  -> 경로의 내부를 채워, 채워진 도형을 그린다.
  -> 열린 도형이라면 fill 실행 시 자동으로 닫힌다. closePath() 할 필요가 없다.

경로는 만들기 위한 단계

1. beginPath()
   내부적으로 경로는 도형을 이루는 하위경로들(선, 아치)의 집합으로 이뤄져 있다.
   이 메소드가 호출될 때 마다 하위 경로 모음은 초기화 된다.
   새로운 도형을 그릴 수 있게 되는 것이다.

2. 실제로 경로가 그려지는 위치를 설정하는 메소드 호출

3. (optional) closePath()
   현재의 점 위치와 시작점 위치를 직선으로 이어서 도형을 닫는 단계.
   이미 도형이 닫혔거나 한 점만 존재한다면 이 메소드는 아무것도 하지 않는다.

   ex)

    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
   
        ctx.beginPath();
        ctx.moveTo(75, 50);    
        ctx.lineTo(100, 75);
        ctx.lineTo(100, 25);
        ctx.fill();
      }
    }
    

   펜 이동하기

   moveTo(x, y)
   moveTo는 해당 좌표로 펜을 이동하는 메소드.
   캔버스가 초기화 되었거나 beginPath()가 호출되었을 경우,
   특정 시작점의 설정에 사용한다.
   또 moveTo 함수는 연결되지 않은 경로를 그리는데에도 사용할 수 있다.

   lineTo(x, y)
   lienTo는 현재 위치에서 해당 좌표까지 선을 그린다.

   ex)

    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
         var ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
        ctx.moveTo(110, 75);
        ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
        ctx.moveTo(65, 65);
        ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
        ctx.moveTo(95, 65);
        ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
        ctx.stroke();
      }
    }