JavaScript 입문 : Canvas Animation I - Canvas 기본속성 이해와 사각형 및 원 만들기

Canvas 기본에 대해 공부하고 있습니다. 물론 어려운 영역은 아주 어렵겠지요. 기본적으로 Canvas를 만들어 보면서 재미는 느끼고 있습니다. 자바스크립트에서 알아야 될 기본사항 정도만 이곳 저곳 강좌를 보면서 공부하면서 정리해 놓고자 합니다. 

 

그런데 지금부터 공부할 내용은 사실 기초와 기본을 띄어 넘는 느낌이 듭니다. 어떻게든 최종 결과물까지 만들어 보고자 합니다. 화면에서 무지개 색깔이 퍼지는게 너무 보기 좋아서 이런 것을 한번 만들어 보고 싶다는 생각을 가지게 되었네요. 

 

본 Canvas 내역은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부 하였습니다. 이 분은 애니메이션 관련 대단한 개발자인 듯 합니다. 최종 목표는 아래 그림처럼 마우스를 움직이면 무지개 색이 나오는 애니메이션을 만드는 겁니다. 

 

 

 

1. 도출하고자 하는 결과 

 

첫번째 시간의 결과물은 검은 캔버스 영역 안에서 다음 그림과 같이 초록색 원을 만들 예정입니다. 향후 2탄에서는 이 원이 마우스가 움직일때 마다 따라 다니는 애니메이션을 목표로 하고 있습니다. 

 

아울러, 여기서 사용되는 코드에 대한 이해를 100% 하는 것을 목표로 하고자 합니다. 

 

 

 

2. HTML 및 CSS 기본구조 

 

HTML 영역에서는 id만 지정하고 CSS영역에서 캔버스의 바탕색을 검은색으로 브라우저 크기를 맞추어 줍니다. 늘 연습했던 것처럼 기본 Canvas 자바스크립트를 작성해 줍니다. 

 

이번에는 Canvas의 가로 세로를 브라우저 크기에 맞추어 주고 시작할 예정입니다. 

 

 

3. Canvas 속성 

 

지금부터는 그동안 배우지 않았던 기본 속성을 좀 더 다듬고 가야 Canvas에 대한 느낌도 쉬워질 듯 합니다. 하얀 직각사각형을 그려 보도록 하겠습니다.

 

 

아주 쉽죠. 지금까지 해왔던 내용을 보면 쉽게 만듭니다. 

이렇게 하면 Canvas의 가로 세로를 브라우저 사이즈로 만들어 놓았기(window.innerWidth, window.innerHeight) 때문에 브라우저 크기를 달리하면 사각형도 같이 반응합니다. 

 

현재 모습

브라우저 크기에 따라 사각형 크기 변화

 

 

이럴 경우 캔버스내 객체가 브라우저의 영향을 받지 않게 사이즈를 고정 시켜줘야 합니다. 여기서 이벤트는 'resize'입니다. 'resize'이벤트 함수내 색상과 크기를 한번 더 싸 주면 Canvas내 객체는 브라우저 변화와 상관없이 고정이 됩니다. 

 

 

 

4. 원그리기

 

지금까지는 사각형을 기준으로 공부를 해왔지만 다양한 애니메이션을 위해서는 원으로 만들 필요가 있습니다. 사각형은 지우고 원그리기를 할 예정인데 위에서 배운바와 같이 객체의 사이즈를 고정 시키고 진행합니다. 

 

원 그리는 함수는 ctx.arc(x, y, r, s-deg, e-deg)입니다. 

 

여기서 x, y는 원가운데 좌표를 말하는데 예를 들어 50, 50이면 원의 중심이 x축과 y축으로부터 각 50픽셀씩 떨어져 있다고 생각하면 됩니다. 

또한 r은 반지름(radius)입니다. 각 축으로부터 최소 반지름 이상 떨어져 있어야 되겠죠. 

s-deg는 시작이 되는 각도로 보통 0이겠죠. e-deg는 마지막 각도이죠. 360도를 돌아야겠죠. 자바스크립트 수학적 기호로 봤을때 360도는 Math.PI * 2 입니다. 

 

이제 다음 순서대로 녹색원을 그려 보도록 하겠습니다. 

 

 

브라우저를 보면 다음과 같이 녹색원을 볼 수 있습니다. 

 

 

오늘은 원그리기에 대한 이해가 필요하니 좀 더 보겠습니다. 

 

원을 채우지 않고 테두리만 만들어 보도록 하겠습니다. 선 그리기 명령어는 strokeStyle(  )과 stroke(  )로 그려줍니다. 노란색으로 바꾸어주고 마무리하면 그림과 같이 원테두리가 그려집니다. 

 

 

 

참고로 점선으로 그리고자 하는 함수는 setLineDash(   )이며 괄호안에 배열형태로 점선의 넓이를 지정해 주면 됩니다. 

 

 

 

 

원을 그리는 방법으로 Canvas Animation 마지막을 무지개 빛으로 화면을 채우는 결과물에 도전할 예정압니다.