Canvas에 마우스로 자유롭게 그림 그리기

캔버스에 마우스로 그림을 그리기 위해서는 mousemove event를 이용해줘야 한다.

과정

마우스로 그림을 그리는 과정을 생각하면 다음과 같다.

 

1. 마우스를 원하는 곳으로 이동시킨다.

2. 클릭한다.

3. 클릭한 채로 그림을 그린다.

4. 클릭을 뗀다.

 

mousemove event

위의 과정과 관련된 이벤트들은 다음과 같다.

mousedown	마우스 버튼을 누를 때 발생한다
mouseup	마우스 버튼을 뗄 때 발생한다
mousemove	마우스를 움직일 때 발생한다
mouseout	마우스를 해당 element 밖에서 안으로 이동시킬 때 발생한다
(mouseover)	(마우스를 해당 element 안에서 밖으로 이동시킬 때 발생한다)

 

// mouse event
canvas.addEventListener("mousemove", function(e){ mouseMove(e) });
canvas.addEventListener("mousedown", function(e){ mouseDown(e) });
canvas.addEventListener("mouseup", function(e){ mouseUp(e) });
canvas.addEventListener("mouseout", function(e){ mouseOut(e) });
 
let startX = 0;
let startY = 0;
let drawing = false;
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";

캔버스에 addEventListener를 이용해 mousemove, mousedown, mouseup, mouseout 이벤트가 일어났을 때, 원하는 동작을 수행하도록 함수를 연결한다.

마우스가 움직일 때 필요한 변수들을 만들어주고, 굵기가 4인 파란색 선을 그릴 수 있도록 설정한다.

 

함수

function draw(curX, curY) {
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(curX, curY);
    ctx.stroke();
}

draw라는 함수를 먼저 만들어준다. 전역변수인 (startX, startY)부터 입력받은 (curX, curY)로 선을 그려주는 함수이다.

function mouseDown(e) {
    startX = e.offsetX;
    startY = e.offsetY;
    drawing = true;
}
 
function mouseMove(e) {
        if(!drawing) return;
        let curX = e.offsetX;
        let curY = e.offsetY;
        draw(curX, curY);
        startX = curX;
        startY = curY;
}

 

mouseDown함수는 캔버스 위에서 클릭했을 때, 현재 위치를 startX, startY에 전달하고, drawing변수를 true로 설정한다.

mouseMove함수에서는 drawing에 따라 다른 반응을 한다.

drawing	상태	action
false	마우스를 클릭하지 않은 상태	return;
true	마우스를 클릭하고 있는 상태	draw(curX, curY)를 실행하고 startX, startY에 현재 위치를 입력한다.

drawing변수 덕분에 클릭하지 않은 상태로 캔버스 위에 커서가 지나가도 그림이 그려지지 않는다.

function mouseUp(e) {
    drawing = false;
}
 
function mouseOut(e) {
    drawing = false;
}

mouseUp과 mouseOut을 통해 마우스 버튼을 뗐을 때와 캔버스를 벗어났을 때 그림을 더이상 그리지 않도록 설정한다.

 

결과

원하는 대로 캔버스 안에서 그림을 그릴 수 있다.

 

 

참고한 사이트

https://kkk-kkk.tistory.com/entry/%EC%98%88%EC%A0%9C-11-11-%EB%A7%88%EC%9A%B0%EC%8A%A4-%EB%93%9C%EB%9E%98%EA%B9%85%EC%9C%BC%EB%A1%9C-%EC%BA%94%EB%B2%84%EC%8A%A4%EC%97%90-%EA%B7%B8%EB%A6%BC-%EA%B7%B8%EB%A6%AC%EA%B8%B0

예제 11-11. 마우스 드래깅으로 캔버스에 그림 그리기

https://ko.javascript.info/mouse-events-basics

마우스 이벤트