JavaScript 입문 : Canvas 이론 정리 - 마우스이벤트 활용하여 선 그리기

지난 시간 캔버스 위치(좌표 읽기)에 대하여 조금 깊이 공부를 해 보았습니다. 결국 캔버스의 크기를 임의로 만들어도 전체 화면을 기준으로 수치를 계산하여 빼 줌으로써 정확한 마우스 클릭 지점에 원을 그릴 수 있었습니다. 이제 마우스 이밴트를 통하여 선을 캔버스에 그리는 방법을 공부할 텐데요. 최종 목표는 우리가 흔히 사용하는 그림판을 만들어 보는 겁니다. 

 

관련 강좌는 '1분코딩의 HTML5 Canvas 라이브 강좌'를 기본으로 공부하고 있습니다. 

 

1. 마우스이벤트에 대한 이해 

 

캔버스위에 자유곡선으로 그림을 그린다는 것은 마우스를 클릭해서 움직일때 그려지는 것이고 마우스를 클릭하지 않으면 그림을 그리지 않는 원리입니다. 이때 사용하는 이벤트가 움직이는 것은 'mousemove', 마우스를 누르는 것은 'mousedown', 마우스를 떼는 것은 'mouseup'입니다. 

 

▶ mousemove 이벤트 활용 그려보기

 

먼저 mousemove를 사용해서 마우스를 움직여 봅니다. 다음과 같이 만들고 캔버스위로 그림을 그릴 수 있습니다. 

 

 

 

상기 그림은 마우스가 캔버스 위로 움직일때마다 그려집니다. 이제 자연스럽게 마우스 이벤트에 대한 조건을 적용하면 될 듯 합니다. 

 

2. 마우스이벤트 활용 그리기 

 

이제는 mousedwon, mouseup, mousemove를 이용하여 그리도록 하겠습니다. 이 곳에서는 각 이벤트별 함수를 만들어야 하고 플래그 변수를 이용하여 true일때만 그려지면 되겠습니다. 이벤트별 함수는 본인이 이해하기 쉬운 용어로 사용하면 되겠습니다. 

 

기본 구조는 다음과 같이 잡을 수 있습니다.

 

 

이제 플래그 변수를 적용해 보고 캔버스에 그림을 그려 봅니다.