노마드코더 바닐라 JS로 그림판 만들기 ~#2.2 TIL

---

🔍canvas란?

• html의 한 요소
• context를 갖는다는 특징이 있음(픽셀에 접근 가능)

---

📌canvas 사용하기

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

.getContext() 캔버스 element의 context를 가져옴

---

📍 좌표값 찾기

clientX clientY 윈도우 전체 범위에서 마우스 위치값
offsetX offsetY 캔버스 범위에서 마우스 위치값

---

📍 그림그리기

이해하기 어려웠던 onMouseMove()함수를 집중적으로..

• onMouseMove(event)함수는 addEventListener에서 "mousemove"이벤트로 호출되는 함수이다.
• painting은 boolean 변수로 default값 false로 설정되어있다.

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

캔버스에서 마우스를 움직이는 동안 onMouseMove()함수는 계속해서 호출되고 있다는 사실이 굉장히 중요하다고... 니꼬쌤께서 말씀하셨다...

캔버스를 마우스에서 움직이는 동안

• mousedown 전
  .beginPath()로 경로가 계속 생성되는 것이고
  .moveTo()는 경로의 일부가 된다. 특정 시작점을 설정.
• mousedown 후
  .lineTo(x, y) 시작점에서 (x, y)좌표(=끝점)까지 선을 그림. 이전 경로의 끝점은 다음 경로의 시작점이 된다.
  .stroke()로 그린다!

---

참고
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

---

나머지는 레퍼런스를 그때 그때 찾아보는 걸로 하고, 오늘은 과정 이해만..
강의 댓글창도 도움이 많이 되었다 짱짱
canvas 신기하다(╹ڡ╹ ). 글고 좀 어려움...

조만간 다시 해보기