JavaScript 입문 : Canvas 이론 정리 - 그리기 (사각형, 선, 원, 별, 스마일)

캔버스 지원 브라우저와 캔버스 크기 설정에 대해 공부를 해 보았는데 브라우저는 최근에는 대부분 지원이 가능하지만 유저들을 위해 지원여부를 감지하고 표시해 주는 Modernizr 에 대해 확인을 해 보았구요. 크기 설정은 캔버스 자체를 브라우저의 2배로 설정하여 작업하고 CSS에서 100%로 맞추어 주면 고해상도를 나타낼 수 있다고 배웠습니다. 

 

이제는 간단히 그려지는 도형에 대해 기본 순서를 정리해 보겠습니다. 

 

역시 본 내용은 '1분코딩 HTML5 Canvas 라이브 강좌'를 기본으로 하고 있습니다. 

 

1. 사각형 그리기 

 

기본적으로 600 X 400의 캔버스 크기를 만들고 시작 하겠습니다. 

도형에 색을 지정하지 않으면 기본색은 검은색입니다. 

 

 

상기 그림을 정리하면 fillRect는 사각형을 채우는 것이고 fillRect(x거리, y거리, 가로크기, 세로크기)로 이해하면 됩니다. 

색을 변경하고자 하면 fillStyle을 배운적이 있습니다. Hex 컬러 연습도 같이 하면 좋겠네요. 좋아하는 색을 컬러 코드로 외우면 있어 보입니다. 훗.

 

 

참고로 색을 반영하고자 하면 먼저 선언하고 그려야 합니다. 물감에 먼저 색을 찍고 그리는 개념으로 이해하면 될 듯 합니다. 

 

선 테두리만 그리는 것은 strokeRect( ) 입니다. 선색은 strokeStyle이겠죠.

 

 

 

상기 그림에서 주황색 사각형 가운데를 없애 보도록 하겠습니다. 여기서 사용되는 명령어는 clearRect(  )입니다.

 

 

 

 

2. 선그리기 

 

선그리기의 순서에서 반드시 지켜야 할 메소드는 시작시 항상 beginPath(  )를 선언하고 시작해야 합니다. 

 

beginPath(  ) 시작 선언하고 어느지점에서 시작할지인 moveTo(  )와 어디까지 갈지인 linTo(  )를 선언허고 선을 그려주는 stroke(  ) 메소드가 필요하며 마지막으로 시작된 path를 닫아주는 closePath(  )를 선언합니다.

 

 

 

 

 

3. 원 그리기 

 

원 그리기의 기본구조는 다음과 같습니다. 원(circle)을 그리는게 아니라 호(arc)를 기준으로 그립니다 .

arc(x로부터 중심점, y로부터 중심점, 반지름, 시작각도, 끝나는각도)의 순서로 만들어 줍니다. 언제나 beginPath(  )가 먼저 선언되야 하는 것을 기억해 두자구요. 

 

 

 

 

※ Self Check

 

여러가지가 많겠지만 별하고 스마일 모양을 만들어 보도록 합니다. 

 

① 별 그리기 

 

도형의 좌표를 추측하기 위해 손으로 계산도 가능 하겠지만 눈금선같은 곳에 사용하면 정확하게 표현이 가능하리라 보여집니다. 

 

다음과 같이 좌표를 만들 수 있습니다. 

 

 

이를 기준으로 Canvas를 그리면 다음과 같이 나오겠네요. 

 

 

상기 그림에서 ctx.stroke(  )는 매회 그려주는게 좋습니다. 그렇지 않으면 좀 더 얇게 연결되긴 합니다만 기본적으로 매 범위에서 선을 그려주는게 좋을듯 합니다. 

 

 

② 스마일 그리기

 

스마일 그리기 역시 좌표를 그려 놓고 호를 그리는 메소드를 이용하면 될 듯 합니다. 우선 나름대로 좌표를 정리해 보았는데 그림이 이상하면 그 후 수정해도 될 듯 합니다. 반지름이 150인 원을 중심으로 다음과 같이 그릴 수 있습니다.

 

 

arc를 이용한 방식을 고민해 보겠습니다. 

 

원은 쉽게 그릴 수 있으며 눈은 작은 원인데 180도까지만 시계 반대방향으로 돌리면 되고 입도 반지름을 눈보다는 크게하여 시계 방향으로 180도 돌리는 그림을 반영하면 됩니다. 

 

완벽하지는 않지만 그래도 스마일 모양이 나왔네요...