캔버스클릭이벤트
-
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를 수정하면 되겠네요. ..
-
JavaScript 입문 : Canvas Animation II - 클릭이벤트(PointerEvent)를 이용하여 원 찍어내기컴퓨터 알아가기/JavaScript 2022. 11. 8. 19:30
Canvas Animation 2번째 시간입니다. 지난 시간 초록색 원을 그려 보았고 이제는 마우스 클릭 이벤트를 이용하여 클릭때마다 원을 만들어 볼 예정입니다. 이미 설명 하였듯이 이렇게 미리 만들어 놓은 프로그램(라이브러리)을 이용하는 것이 아니라 순수하게 자바스크립트 언어만으로 결과를 만들어 내는 것을 특히 '바닐라 자바스크립트'라고 불립니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부합니다. 1. 원 만들기 기본 지난 시간 초록색 원을 만든 전체 코드는 다음과 같습니다. 2. 클릭하면 원 만들어지기 지금부터는 함수를 이용하여 Canvas내 원을 만들고 각 좌표를 확인하는 방법을 공부할 차례입니다. 먼저 위 코드에서..