[바닐라js로 그림판 만들기] 2D Context

MDN을 통해서 canvas에 대해 배워본다.

Canvas 태그는 context를 갖고 있는 HTML의 요소이다. context라는 것은 우리가 픽셀에 접근할 수 있는 방법이다.

굉장히 간단하게 이 context를 만들 수 있다.

 

const ctx = canvas.getContext("2d");

브러쉬역할을 하는 것을 getContext를 통해 가져온다.

 

ctx.strokeStyle = "#616161"; //처음 사용하는 사람이 이 색상으로 사용하도록 한다.

strokeStyle은 윤곽선 색을 설정하는 것이다.

 

ctx.lineWidth = 2.5;

lineWidth는 브러쉬의 굵기를 지정하는 것이다. 나중에는, 만들어 놓았던 input의 type=”range”를 통해 lineWidth를 조정할 수 있도록 해야 한다.

 

function startPainting(){

    painting = true;

}

그리고 startPainting이라는 함수를 만든다.

 

if(canvas){

    //canvas가 존재하는지 확인

    canvas.addEventListener("mousemove",onMouseMove);

    canvas.addEventListener("mousedown", startPainting);

    canvas.addEventListener("mouseup",stopPainting;

    canvas.addEventListener("mouseleave",stopPainting);

}

그리고 onMouseUp함수를 그냥 지우고, mouseup일 때 stopPainting, mousedown일 때 startPainting, mouseleave일 때 stopPainting이라고 지정한다. 우리가 신경써야 할 것은 mousemove이다.

 

function onMouseMove(event){

    const x = event.offsetX;

    const y = event.offsetY;

    if(!painting){

        ctx.beginPath();

        ctx.moveTo(x,y);

    }

}

 

mousemove에서는 움직임을 감지하고 라인을 만들어야 한다.

 

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();

    }

}

 

Canvas의 context는 많은 것을 가지고 있는데 path도 가지고 있다. Path는 기본적인 선이다. 그다음 path를 움직일 수도 있고 색으로 채울 수도 있고 닫을 수도 있고 뭐든지 할 수 있다. 그냥 선인 것이다. Just 라인.

Path를 만드는 것은 기본적으로 선(line), 선의 시작점을 만드는 것이다. 시작점은 마우스가 움직이는 곳이라면 어디든지 되는 것이다. 하지만 클릭하고 나면 시작점부터 클릭한 곳까지 선을 만드는 것이다.

 

여기까지 했는데 작동을 하지 않는다. 그 이유는 canvas에 사이즈를 주지 않아서 그런 것 같다.

Canvas는 두개의 사이즈를 가져와야 한다. Css 사이즈랑, pixel manipulating 사이즈.

기본적으로 우리는 css로 캔버스를 만들지만 pixel을 다룰 수 있는 elemenet로서 만드는거니까 이 element에 width와 height를 지정해줘야 한다. 그것을 자바스크립트 코드로 넣어준다.

 

canvas.width = 700;

canvas.height = 700;

 

그러면 작동을 잘 하는 것을 볼 수 있다.

 

 

<도형 그리는 과정>

1. path을 만들면(beginPath() )

2. 마우스의 x,y좌표로 path를 옮긴다.(moveTo(x,y))

    path의 시작점은 내 마우스가 있는 곳이다.

   그리고 내가 클릭을 하면(mousedown), startPainting이 시작되면서 painting 값이 true가 되는 것이다.

3. lineTo는 path의 이전위치에서 지금 위치까지 선을 만드는 것이다.

4. stroke는 path를 만들고 획을 긋는 것이다.