MouseMove
-
JavaScript 입문 : Canvas 이론 정리 - 마우스이벤트 활용하여 선 그리기컴퓨터 알아가기/JavaScript 2022. 11. 26. 19:30
지난 시간 캔버스 위치(좌표 읽기)에 대하여 조금 깊이 공부를 해 보았습니다. 결국 캔버스의 크기를 임의로 만들어도 전체 화면을 기준으로 수치를 계산하여 빼 줌으로써 정확한 마우스 클릭 지점에 원을 그릴 수 있었습니다. 이제 마우스 이밴트를 통하여 선을 캔버스에 그리는 방법을 공부할 텐데요. 최종 목표는 우리가 흔히 사용하는 그림판을 만들어 보는 겁니다. 관련 강좌는 '1분코딩의 HTML5 Canvas 라이브 강좌'를 기본으로 공부하고 있습니다. 1. 마우스이벤트에 대한 이해 캔버스위에 자유곡선으로 그림을 그린다는 것은 마우스를 클릭해서 움직일때 그려지는 것이고 마우스를 클릭하지 않으면 그림을 그리지 않는 원리입니다. 이때 사용하는 이벤트가 움직이는 것은 'mousemove', 마우스를 누르는 것은 'm..
-
JavaScript 입문 : Canvas Animation III - 마우스를 따라 다니는 원 만들기컴퓨터 알아가기/JavaScript 2022. 11. 9. 19:30
지난 시간 캔버스 클릭이벤트를 활용하여 마우스 클릭마다 캔버스 위에 원을 만들어 보았습니다. 이는 캔버스내 좌표를 읽어내는 방식을 응용한 것으로 좀 더 다양하게 응용이 가능합니다. 한번 이 원이 마우스가 움직일때마다 따라다니는 코드를 공부해 보고자 합니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부합니다. 지난 시간 다음 그림과 같이 마우스 클릭마다 원을 생성해 보았습니다. 1. 마우스 움직이는 이벤트 (mousemove 이벤트) 이제는 마우스를 움직일때 원이 따라 다니는 코드를 만들 건데요. 그러기 위해서는 mousemove이벤트를 활용해야 합니다. 다음과 같이 작성하고 콘솔을 확인해 보도록 하겠습니다. 위 콘솔을 보게..
-
JavaScript 입문 : 캔버스 (Canvas) 기초 - 마우스 이용 자유 곡선 그리기컴퓨터 알아가기/JavaScript 2022. 11. 6. 19:30
Canvas 기초 두번째 시간으로 이제는 본격적으로 함수를 이용하여 곡선 그리기에 도전을 하고자 합니다. 이 곳에서는 마우스를 사용하며 기본적으로 addEventListener의 마우스 이벤트를 활용하여 진행하고자 합니다. 다음 그림과 같이 자유 곡선 기능을 사용하여 Canvas내 글씨를 써 보는게 오늘 목표입니다. 이 내용은 'developedbyed 유투브 강좌'를 기본으로 응용해 본 것입니다. 캔버스에 마우스를 이용하여 자유 곡선을 만들고자 하면 이벤트를 이용합니다. 마우스를 누르고 그리기 때문에 시작점은 'mousedown'이벤트가 필요하고 그리기를 끝내는 경우는 'mouseup'입니다. 그리고 본격적으로 그려지는 이벤트는 'mousemove'입니다. ① 마우스 이벤트 기본구조 만들기 Canvas..