JavaScript 입문 : Canvas Animation III - 마우스를 따라 다니는 원 만들기

지난 시간 캔버스 클릭이벤트를 활용하여 마우스 클릭마다 캔버스 위에 원을 만들어 보았습니다. 이는 캔버스내 좌표를 읽어내는 방식을 응용한 것으로 좀 더 다양하게 응용이 가능합니다. 한번 이 원이 마우스가 움직일때마다 따라다니는 코드를 공부해 보고자 합니다. 

 

역시 Animation 학습은  'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부합니다. 

 

지난 시간 다음 그림과 같이 마우스 클릭마다 원을 생성해 보았습니다.

 

 

1. 마우스 움직이는 이벤트 (mousemove 이벤트)

 

이제는 마우스를 움직일때 원이 따라 다니는 코드를 만들 건데요. 그러기 위해서는 mousemove이벤트를 활용해야 합니다. 

다음과 같이 작성하고 콘솔을 확인해 보도록 하겠습니다. 

 

 

 

위 콘솔을 보게 되면 화면에는 클릭을 하지 않으면 원은 생기지 않지만 검은 캔버스 위로 마우스를 움직여 보면 콘솔에 MouseEvent라는 이벤트가 물 흐르듯이 표시됩니다. 

 

이 함수에 drawCircle(  )을 넣어 캔버스가 어떻게 변하는지 보겠습니다. 

 

 

초록색으로 칠해집니다. 

 

 

2. 마우스를 따라 다니는 원 만들기

 

마우스를 움직이는 좌표를 읽어내는 MouseEvent를 설정 하였으니 본격적으로 애니메이션을 이용한 함수를 만들 건데요. 애니메이션에서 필요한 내용은 MouseEvent 함수와 연결시켜 주면 됩니다. 이제는 클릭이벤트(PointerEvent)는 필요 없으니 주석처리를 하거나 지우면 됩니다.

 

 

상기 함수에서 중요한 점은 애니메이션 효과를 위해서는 자체 함수가 필요한데요. requestAnimationFrame(  )이라는 함수가 필요합니다. 

 

그전에 사용한 ctx.clearRect(0, 0, canvas.width, canvas,height)는 이전 함수에서 사용되었을 수도 있는 프레임을 초기화 시키는 역할을 합니다. 

 

animate(  ) 함수내에 drawCircle(  )을 반영해 보고 캔버스위에 마우스를 여기저기 움직여 보면 초록색원 하나가 따라다니는 것을 볼 수 있습니다.

 

 

 

음... 이거는 효과를 직접 봐야하기 때문에 코드펜으로 코드를 공유해 보겠습니다. 

See the Pen circleFollow by skkim0303 (@skkim0303) on CodePen.