반응형
requestAnimationFrame( )
-
JavaScript 입문 : Canvas Animation III - 마우스를 따라 다니는 원 만들기컴퓨터 알아가기/JavaScript 2022. 11. 9. 19:30
지난 시간 캔버스 클릭이벤트를 활용하여 마우스 클릭마다 캔버스 위에 원을 만들어 보았습니다. 이는 캔버스내 좌표를 읽어내는 방식을 응용한 것으로 좀 더 다양하게 응용이 가능합니다. 한번 이 원이 마우스가 움직일때마다 따라다니는 코드를 공부해 보고자 합니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부합니다. 지난 시간 다음 그림과 같이 마우스 클릭마다 원을 생성해 보았습니다. 1. 마우스 움직이는 이벤트 (mousemove 이벤트) 이제는 마우스를 움직일때 원이 따라 다니는 코드를 만들 건데요. 그러기 위해서는 mousemove이벤트를 활용해야 합니다. 다음과 같이 작성하고 콘솔을 확인해 보도록 하겠습니다. 위 콘솔을 보게..