[HTML5 Canvas] 02 캔버스 그림 그리기

✹ 해당 포스팅은 Youtube에 업로드된 1분코딩님의 <HTML5 Canvas 캔버스 라이브 강좌>의 필기입니다.
이 곳을 클릭하시면 유튜브에서 직접 강좌를 들으실 수 있습니다.
대부분의 샘플 코드는 해당 강좌에서 제공되는 코드임을 밝힙니다.

콘텍스트 객체 🎑

캔버스에 그림을 그릴 때는 거의 Context를 이용해서 그린다!

      const canvas = document.querySelector(".canvas");
      const context = canvas.getContext("2d");

이 세팅을 거의 기본으로 생각해주면 된다.
Context는 getContext 메소드를 통해서 호출한다.
getContext를 통해서 context를 호출한 후에 이를 console에 찍어보면, 아래와 같이 수많은 메소드들이 있는 것을 확인해볼 수 있다.

그렇다면 getContext("3d")도 가능할까?

직접 해보니, Console에 null이 출력되었다.
구글링을 해보니, 역시는 역시... stackoverflow에 이미 같은 질문을 한 사례들이 있었다.

답변을 살펴보니 const context = canvas.getContext("webgl"); 을 사용하라고 한다!

네모 그리기 🎹

캔버스 태그를 다룰 때는 진짜 캔버스에 "그림을 그린다"고 생각하는 것이 좋다!

      context.fillRect(50, 50, 100, 100); // 1
      context.fillStyle = "red"; // 2
      context.fillRect(0, 0, 100, 100); // 3
      context.clearRect(80, 80, 50, 50); // 4
      context.strokeRect(150, 150, 100, 100); // 5

MDN을 참고하면 사각형 관련 메소드들을 찾아볼 수 있다.

• fillRect(x, y, width, height) (en-US)
  색칠된 직사각형을 그립니다.
• strokeRect(x, y, width, height) (en-US)
  직사각형 윤곽선을 그립니다.
• clearRect(x, y, width, height) (en-US)
  특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다.

위 예시 코드와 같이 캔버스 위에 그림을 그려주면 아래와 같은 결과가 출력된다.

정말 그림을 그리는 순서와 비슷하다는 것을 알 수 있다.

1) 디폴트값인 검정색으로 사각형을 그린다.
2) 붓에 빨간색 물감을 묻힌다.
3) 다시 사각형을 하나 더 그려준다. (기존에 그려진 사각형 위에 겹쳐져 그려지는 것을 확인할 수 있다.)
4) 사각형 모양으로 지워준다.
5) 사각형 테두리를 그린다.

선 긋기 🎼

      context.beginPath(); // 1
      context.moveTo(100, 100); // 2
      context.lineTo(300, 200); // 3
      context.stroke(); // 4
      context.closePath(); // 5

위 코드의 결과를 미리 살펴보면 아래와 같다!

MDN에 경로그리기와 관련해 메소드들을 소개하고 있다.

• beginPath() (en-US)
  새로운 경로를 만듭니다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 됩니다.
• Path 메소드 (Path methods)
  물체를 구성할 때 필요한 여러 경로를 설정하는데 사용하는 함수입니다.
• closePath() (en-US)
  현재 하위 경로의 시작 부분과 연결된 직선을 추가합니다.
• stroke() (en-US)
  윤곽선을 이용하여 도형을 그립니다.
• fill() (en-US)
  경로의 내부를 채워서 내부가 채워진 도형을 그립니다.

경로 그리기 역시 실제 캔버스에 그림을 그린다는 생각으로 접근해볼 수 있다.

1) beginPath: 선을 그릴 준비를 한다!
2) moveTo: 해당 위치로 붓을 가져간다.
3) lineTo: 스케치를 해준다. (아직 완전 그린 게 아니다!)
4) stroke: 리얼 붓으로 선을 긋는다.
5) closePath: 붓을 뗀다!

원 그리기 🥁

360도 짜리 호 = 원

원 그리기는 사실 circle과 같은 메소드가 있는 것이 아니라, arc, 호를 통해 그려준다.

      context.beginPath();
      context.arc(300, 200, 50, 0, 라디안(360), false); //라디안(각도) 함수는 '각도 * Math.PI / 180`를 리턴해주는 함수
      context.stroke();
      context.beginPath();
      context.arc(500, 100, 20, 0, 라디안(360), false);
      context.stroke();

MDN을 통해 동일하게 메소드를 살펴보면!

• arc(x, y, radius, startAngle, endAngle, anticlockwise) (en-US)
  (x, y) 위치에 원점을 두면서, 반지름 r을 가지고, startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다.
• arcTo(x1, y1, x2, y2, radius) (en-US)
  주어진 제어점들과 반지름으로 호를 그리고, 이전 점과 직선으로 연결합니다.

중간에서 beginPath로 끊어주지 않으면!?

아래 그림과 같이 한 붓 그리기로 두 원이 그려지는 것을 확인할 수 있다.

캔버스 태그를 다룰 때는 정말 그림을 그린다고 생각하자는 걸 다시 한 번 되새기자!