JavaScript 입문 : 캔버스 (Canvas) 기초 - 정의, 채운 사각형 및 빈 사각형 그리기, 선 그리기, 선과 선을 연결하여 도형 만들기

자바스크립트의 영역은 생각보다 넓은것 같습니다. 이곳 저곳 게임에 대해 조금 더 알아보다가 기본적으로 Canvas에 대해 아는 편이 좋다고 하네요. 

 

캔버스(Canvas)는 말 그대로 그림을 그리는 바탕이 되는 도화지 같은 것이고 이 곳에서 애니메이션 효과를 이용하여 스크린에 시각적으로 나타낼 수 있다고 합니다. 아울러, 캔버스를 이용하여 원이나 사각형을 만들고 서로 충돌할 때 멈추는 과거에 많이 해 보았던 게임도 구현할 수 있다고 하니 모르고 넘어가자니 계속 머리속에 남아있게 되어 여기저기 강좌를 통해 기본 Canvas 기능에 대해 일부라도 알고 가는게 낫다고 판단이 되네요. 그냥 스스로 마음에 대한 위로라고 할까요 뭐 그렇습니다. 

 

▒ 캔버스 (Canvas) 기본 기능의 이해 

 

본 내용은 'developedbyed 유투브 강좌'를 통해 공부한 내역을 정리한 것입니다. 

 

1. 기본 구조 

 

Canvas의 기본구조는 HTML내 <canvas>태그를 선언하고 자바스크립트를 이용하여 애니메이션 효과를 줄 수 있습니다. 여기서 CSS는 회면을 꾸미거나 하는 측면에서 사용되나 기본을 공부하는 입장에서는 자바스크립트에 중점을 두면서 정리 하였습니다.

 

따라서 HTML에서는 id를 가진 Canvas태그만 반영을 하고 CSS에서는 캔버스의 영역을 브라우저 영역만큼만 지정을 하면서 시작 하도록 하겠습니다. 

 

아울러 금일 목표는 Canvas를 이용하여 사격형을 그리고 사각형의 위치 변동과 점과 점을 잇는 선과 캔버스위에 마우스로 자유롭게 선을 그리는 부분을 공부할 예정입니다. 

 

 

 

이제부터 자바스크립트로 Canvas를 이용해 보도록 하겠습니다. 

 

2. 채운사각형 그리기 

 

두가지 방법이 있습니다. 첫번째는 Canvas 기본을 미리 설정하고 함수를 이용하여 만드는 방법과 함수내 전부 설정하는 방법이 있는데 결과적으로 같을 수 있습니다. 글로는 이해가 안가니 예제를 통해서 만들어 보겠습니다.

 

기본적으로 Canvas를 이용하여 애니메이션 효과를 보기 위해서는 어떤 형태로든지 addEventListener가 필요합니다. 그러기 위해서는 역시 태그 선택도 필요 하겠지요. <canvas>태그를 선택하고 진행합니다. 

 

아울러 Canvas를 그리고자 하는게 평면인지 입체인지를 getContext로 지정해주고 전체화면 틀을 지정해 줍니다. 지금부터는 script에 반영하면서 브라우저도 동시에 반영을 하도록 하겠습니다. 

 

 

 

상기 그림에서 보면 이제야 Canvas의 구분이 2px solid로 나타나는 것을 확인할 수 있습니다. 

 

이제 채워진 사각형을 그려보도록 하겠습니다. '2d' Canvas 변수로 사용(여기서는 ctx)해야 하며 사각형이라는 영어 Rectangle을 사용합니다. 특별한 언급이 없는 한 스크립트 순서대로 코드가 이루어 집니다. 

 

 

 

코드를 설명하면 ctx.fillRect(x, y, w, h)로 이해해야 하며 x는 수평 거리, y는 수직 거리며 w는 객체(사각형)의 넓이 h는 높이를 말합니다. 여기서는 정사각형 이겠죠. 직사각형으로 하고자 하면 넓이와 높이를 조정하면 됩니다. 단위는 픽셀로 보면 됩니다. 기본값이 검은색으로 색을 변하고자 하면 fillStyle을 사용합니다. 아주 중요한 점은 fillRect(  ) 명령어는 마지막에 사용하고 속성값은 그 이전에 만들어줘야 반영이 됩니다. 

 

 

 

3. 사격형 선만 긋기 

 

채운 사각형 대신 사각형 선을 긋고자 하면 fillRect(  ) 대신 strokeRect(  )를 사용합니다. 위 사각형은 지우고 다음과 같이 빨간선인 사각형 선을 만들어 보겠습니다. 선의 두께를 설정하는 명령어는 lineWidth 입니다. 

 

 

 

이 위에 겹쳐진 조금 오른쪽 아래로 이동한 사각형을 하나 더 그려 보겠습니다. 

 

 

 

아직까지는 쉽네요. 이러한 개념이 Canvas의 전부라면 좋겠네요. 

 

4. 선과 선 연결하여 도형 만들기

 

이제는 시작점과 끝나는 지점을 이용하여 선을 만들어 보고 이 선을 이어 삼각형을 만들어 보도록 하겠습니다. 사각형 명령어를 지우고 시작 하겠습니다. 

 

다음 순서를 기억해야 합니다.

시작선언은 beginPath(  )이고 시작점은 moveTo(  ) 이동하는 좌표는 lineTo(  )이고 도형 끝맺음 closePath(  )를 해준 후 그리기는 stroke(  )를 해줘야 합니다. 

 

다음 그림을 위 순서대로 만들어 보고자 합니다. 

 

① 선 그리기

 

x, y가 각각 50픽셀 떨어진 지점에서 시작하고 오른쪽으로 x좌표만 100픽셀 가도록 선을 만듭니다.

 

 

 

② 밑으로 내리기 

 

이제는 y축을 옮겨봅니다. 

 

 

 

③ 도형 만들기

 

사각형을 만들 수도 있지만 여기서 마무리하고 삼각형으로 해 보겠습니다. 

 

 

 

 

이렇듯 Canvas를 이용하여 도형을 그릴 수 있습니다. 다음 시간에는 결국 마우스를 이용하여 자유롭게 그림을 그리는 addEventListener를 사용해 보고 원도 그려 보도록 하겠습니다. 

 

도화지에 그림을 자바스크립트로 그리는 기능이 Canvas이고 여기서 애니메이션을 이용하여 화려하고 아름다운 디자인을 만들 수 있겠네요. 

 

참고로 이렇게 외부 라이브러리의 도움을 받지 않고 순수하게 자바스크립트 내용으로 코드를 만들어 결과물을 얻는 것을 '바닐라 자바스크립트'라고 합니다.