반응형
다양한사이즈_원만들기
-
JavaScript 입문 : Canvas Animation V - 다양한 사이즈 원 만들고 크기 줄어 들게 만들어서 클릭 이벤트에 연결하기컴퓨터 알아가기/JavaScript 2022. 11. 11. 19:30
지난시간까지 캔버스위 같은 사이즈 (반지름 50)의 초록색 원이 100개 생겼다가 사라지는 효과까지 공부를 해 보았습니다. 이어서 좀 더 효과를 주면서 좀 더 어렵지만 멋있는 애니메이션에 도전을 하고자 합니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 1. 다양한 사이즈 원 만들기 랜덤 사이즈로 만들기 위한 작업은 constructor에서 이미 랜덤 설정을 해 놓았습니다. 원을 그리는 함수에서 반지름이 50으로 되어 있는 부분을 constructor의 내용으로 바꾸어 줍니다. 화면을 보면 1 ~ 6 사이즈의 100개 원이 보입니다. 즉, 사이즈를 수정하고자 하면 constructor를 수정하면 되겠네요. ..