[JavaScript] #2.2 Recap! (#코딩공부)

https://youtu.be/LAG1ERXR2xQ

---

<복습>

https://wook-2124.tistory.com/102

[JavaScript] #2.1 2D Context (#코딩공부)

 

<준비물>

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

<코드기록>

// Path는 mouse의 움직임이 보이지 않기때문에 console.log로 출력했고
// line는 가시적으로 보이지만 path와 비교를 위해 console.log로 출력함
if (!painting) {
    console.log("creating path in ", x, y)
    ctx.beginPath();
    ctx.moveTo(x, y);
  } else {
    console.log("creating line in ", x, y)
    ctx.lineTo(x, y);
    ctx.stroke();
  }


// ctx.closePath() 실험
// path가 mouse를 움직일 때마다 line과 함께 계속해서 다시 생기지 않고
// 처음 mouse를 click한 곳에 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();
      ctx.closePath();
    }
  }

---

1. Path, Line

function onMouseMove(event)에서 path는 canvas안에서 mouse의 움직임이 눈에 보이지 않기 때문에 console.log로 출력했고, line는 가시적으로 보이지만 path와 x, y 좌표 비교를 위해 console.log로 출력했다.

 

왼쪽 사진) canvas에 mouse만 갖다대고 움직이는 것은 아직 painting 하는게 아니기 때문에(!) if의 condition을 true로 만족해서 console.log("creating path in ", x, y)가 출력됐다.

 

오른쪽 사진) canvas에 "click" event로 painting이 시작되서 else인 console.log("creating line in ", x, y)가 출력됐다.

---

2. closePath

closePath는 말 그대로 path를 닫아버리는 것이다. 즉, path가 mouse를 window 혹은 canvas에서 움직일 때마다 line과 함께 계속해서 다시 생기지 않고, path의 시작점이 mouse로 처음 "click"한 곳으로 한정되는 것이다.

 

이런식으로 예술적(?)으로 표현되긴 하지만, mouse를 처음 "click"한 시작점에서 벗어나지 못하고, 즉 path가 새로 생기지 않고, line만 생긴다.

 

---

※ 아직 끝나지 않은 코로나19 조심하세요!!

http://ncov.mohw.go.kr/guidelineView.do?brdId=6&brdGubun=61&dataGubun=&ncvContSeq=1996&contSeq=1996&board_id=&gubun=