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

[출처-유튜브 노마드 코더 Nomad Coders]

https://youtu.be/IlANstQ1h3M

 

MDN을 통해서 canvas에 대해 배워보자!

 

필요한건 이 사이트에 다 있다.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

CanvasRenderingContext2D - Web APIs | MDN

 

 

canvas는 context를 갖고 있는 HTML의 한 요소이다.

우리는 그 요소 안에서 pixel들을 다룰 수 있다.그래서 canvas를 크게 만들어야 함

 

우리가 해야할건 context variable을 만드는 것이다.

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

 

 

그 다음엔 context의 default를 설정한다.

context는 lineWidth도 있고 fill도 있고 strokeStyle도 있다.

먼저 strokeStyle을 추가하자.

이걸 사용하려는 사람이 첫 번째 색(검정색)으로 시작하도록 설정한다.

ctx.strokeStyle = "##2c2c2c";

 

 

lineWidth(굵기 조정)을 설정해준다.

ctx.lineWidth = 2.5;

 

 

startPainting이라는 함수를 만든다.

function startPainting() {
    painting = true;
}

 

 

코딩중..

if(canvas) {
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mousedown", startPainting);
    canvas.addEventListener("mouseup", stopPainting);
    canvas.addEventListener("mouseleave", stopPainting);
}

 

 

 

onMouseMove를 신경써서 잘 처리해야한다.

왜냐하면 여기에서 모든 움직임을 감지하고 라인을 만들어야하기 때문이다.

context는 많은 것을 갖고 있는데 path도 갖고 있다.

path는 기본적인 선(line)이다.

path를 움직일 수도 있고 path를 색으로 채울 수도 있고 path를 닫을 수도 있다.

 

일단 기본적으로 선(line)을 시작할 것이다.

하지만 painting을 할 땐 path는 필요하지 않다. painting을 하지 않을 때만 필요함!

path를 만드는 건 기본적으로 선(line), 선의 시작점을 만드는 것이다.

시작점은 마우스가 움직이는 곳이라면 어디든지 가능하다. 하지만 클릭하고나면 시작점부터 클릭한 곳까지 선을 만드는 것이다.

(설명이 어려우니 강의를 보고 머리속으로 이해해볼것..-니꼬쌤-)

 

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

 

 

그러나 위의 코드는 canvas 위에서 클릭하고 마우스를 움직이면 더이상 작동하지 않는다.

우리는 lineTo()라는 것이 필요하다.

lineTo()는 현재 sub-path의 마지막 점을 특정 좌표와 직선으로 연결하는 것이다.

path를 만들고 lineTo()를 호출하면 점과 점이 연결이 된다.

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

아직 path가 없어서 안그려짐...

 

 

 

 

stroke()를 만들어준다.

stroke()는 현재의 stroke style로 현재의 sub-path에 획을 긋는 것이다.

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

안그려짐. 니꼬쌤도 안그려져서 다음 강의에서 보자하고 런하심. 쏘쿨