Today I Learned #22

paintJS 그림 그리기 기능 구현

현재까지 진행된 paintJS는 canvas가 구현되어있으며, 각 색상에 해당하는 button, 붓의 두께를 정하는 range를 구현하였지만, canvas 자체의 그림을 그리는 기능과, 해당 button과 range를 통한 값이 전달되는 기능은 구현되지 않았다. 따라서 canvas에 그림을 그리는 기능을 먼저 구현해보도록 하였다.

선언 및 설정

MDN context 문서를 참고하여, canvas의 context를 설정해주었다.

const ctx = canvas.getContext("2d");
ctx.strokeStyle = "#2c2c2c";
ctx.lineWidth = 2.5;
canvas.width = 500 ;
canvas.height = 500;

또한 strokeStyle을 통해 색상을 정해주고, 펜의 두께를 의미하는lineWidth의 초기값은 2.5로 선언하고, html <canvas>의 크기와 같도록 canvas.width와 canvas.height의 값을 각각 500으로 지정해주었다.

onMouseMove

startPainting과 stopPainting함수를 통해 let으로 선언해주었던 painting의 값을 시작할때 true로, 끝날때 false로 바뀌도록 선언해주고, 해당 painting의 값에 따라 함수가 진행되도록 하였다.

function onMouseMove(event) {
    const x = event.offsetX;
    const y = event.offsetY;
    if(!painting) {
        ctx.beginPath();
        ctx.moveTo(x,y);
    } else {
        ctx.lineTo(x,y);
        ctx.stroke();
    }
}

먼저, "mousemove"가 발생했을 때, painting의 값이 false인 경우, context의 path를 해당 마우스가 위치한 x,y에서 시작하도록 선언하게 했다. 그러는 과정에서, 즉 사용자의 마우스가 canvas위를 움직이다가 mousedown(클릭)이 발생했을 때, painting은 true로 바뀌게 되고, 그 바로 직전의 x,y에서 생성된 beginPath()에서 path가 시작되고, lineTo(x,y)를 통해서 이동된 x,y까지 path가 이어지고, stroke() 함수를 통해 매번 "mousemove"가 발생할 때마다 path가 strokeStyle의 색상과 lineWidth 값의 두께로 색칠된다.

실행 결과