[바닐라JS로 그림판 만들기] Recap!

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

https://youtu.be/LAG1ERXR2xQ

 

이전 강의에서 프로그램이 작동이 안된건 canvas에 사이즈를 안줘서 그런 것 같다.

canvas element는 두 개의 사이즈를 가져야 한다.

CSS 사이즈와 웹브라우저 상의 사이즈.

이 element에 width, height를 지정해줘야 한다.

canvas.width = 700;
canvas.height = 700;

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

canvas.width = 700;
canvas.height = 700;

ctx.strokeStyle = "#2c2c2c";
ctx.lineWidth = 2.5;

let painting = false;

function stopPainting() {
    painting = false;
}

function startPainting() {
    painting = true;
}

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

function onMouseDown(event) {
    painting = true;
}

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

wow!!!!!!!!!!! 작동한다!!!!!!!!!!!

실제 pixel 사이즈를 안줘서 작동을 안한거였음...

canvas를 벗어나면 painting이 중지됨.

 

 

 

ctx.strokeStyle = "#2c2c2c";

ctx.strokeStyle은 우리가 그릴 선들이 모두 #2c2c2c(검정색)을 갖는다고 말하고 있음.

이 context 안에 있는 선들은 모두 #2c2c2c 색을 갖는다는 뜻임.

 

ctx.lineWidth = 2.5;

lineWidth는 그 선의 너비가 2.5px라는 것이다.

 

 

 

path는 선이다.

path를 만들면 마우스의 x, y 좌표로 path를 옮긴다.

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

 

(그 다음 설명은 니꼬쌤의 강의를 보면서 머리속으로 이해하는게 빠르다)

 

 

 

잠깐! ) 만일 closePath()를 쓰면 다음과 같은 일이 발생한다.

ctx.closePath();

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

path가 끝나버리기때문에 저렇게 그려짐..