recap!

이전 글 상태에서 코드가 동작되지 않았던 것은, (그림이그려지지 않았던 것은)

캔버스에 사이즈를 주지 않아서이다.

 

 

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

css사이즈랑, pixel manipulating 사이즈.

기본적으로 우리는 css로 캔버스를 만든다.

 

pixel을 다룰 수 있는 element로서 만드는 것이기 때문에.

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

그래서 여기에 그걸 적을 것이다.

 

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

 

이제 캔버스에 그림이 그려진다!!

 

우리가 실제 픽셀 사이즈를 안줘서 그런것이었다.

 

다시 복습해보자면, 

 

canvas는 어마어마한 능력을 갖고 있는 html5의 한 요소이다.

그 능력들은 이 안에 있는 픽셀들을 다루는 것이다.

 

CSS에서 canvas에 width와 height를 줘야 나이스하게 보인다.

 

픽셀을 다루는 윈도우가 얼마나 큰지 canvas에 알려주기 위해서 width와 height값을 주는 것이다.

 

canvas의 context를 갖는 것도 필요하다. 

 

canvas의 context는 이 안에서 픽셀들을 컨트롤하는 것이다.

 

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

 

이 경우엔 2D이고. 더 많은 context가 있겠지만, 이번에 우린 2d로 작업한다.

 

ctx.strokeStyle = "#2c2c2c";

 

ctx.strokeStyle 은 우리가 그릴 선들이 모두 이 색을 갖는다고 말해주는 것이다.

 

 

우리가 캔버스 위에서 클릭하지 않고 마우스를 움직였을 때에는 

path를 시작한다.

 

path는 선이다. line.

 

path를 만들면 마우스의 x,y좌표로 path를 옮기는 것이다.

 

그건 내가 마우스를 움직이는 모든 순간에 path를 만든다는 것이다.

 

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

 

그러가 우리가 클릭하면 

 

mousedown이 되고 startPainting 함수가 실행된다.

 

function startPainting() {
  painting = true;
}

painting 이 true가 된다는 것이다. 

 

여전히 내가 마우스를 클릭한 채 움직이고 있다면,

canvas.addEventListener("mousemove", noMouseMove);

function noMouseMove(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 함수가 실행되는데, 

 

지금은 painting을 하고 있는거니까 if문이 아니라 else문이 실행.

그래서 lineTo를 호출하고, 

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

 

만약 우리가 첫 번째로 6,6 위치에 path를 만들고, 

 

7,7위치에서 클릭을 했다면, path부터 이 곳까지 선이 만들어질 것이다. 

 

stroke는 현재의 sub-path를 현재의 stroke style로 획을 긋는 일을 한다. 

 

영어로 stroke는 획을 긋는다는 것이다. 

 

이 것은 beginning point나 ending point 같은게 아니다. 

 

이 lineTo()와 stroke()는 내가 마우스를 움직이는 내내 발생한다. 

 

클릭을 안할때까지는 캔버스 위에서 마우스가 돌아다니면서 path를 만들다가, 

클릭을 하면 line을 만드는 것이다. 

 

 

lintTo를 보면, 

현재의 sub-path에서 마지막 지점을 특정좌표로 연결한다고 되어있다.

 

무슨일이 일어나는거냐면 내가 여기에서 path를 시작해서 라인을 만들고, 

그리고 아주 쪼금 더 움직이면 

아주 쪼금 더 움직였던 부분이 자동으로 path의 이 전 위치랑 연결된다는 것이다.

 

그래서 이게 마치 계속 그리는 것처럼 보이는 것이다. 

 

 

 

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

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

ctx.strokeStyle = "#2c2c2c";
//사용자가 첫번째 사용할때는 검정색으로 할 수 있도록 설정해놓음.
ctx.lineWidth = 2.5;  //선의 너비.

let painting = false;

function stopPainting(event) {
  painting = false;
}

function startPainting() {
  painting = true;
}

function noMouseMove(event) {
  const x = event.offsetX;
  const y = event.offsetY;
  /*
   콘솔에 찍히는 좌표중, clientX,Y와 offsetX,Y가 있는데, 
   clientX,Y는 윈도우 화면에서의 좌표이고, 
   offsetX,Y는 캔버스 위에서의 좌표이다. 고로, 우리가 필요한 것은 offsetX,Y.
  */
  if (!painting) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    /*캔버스 위에서 마우스가 움직이면서 path를 만드는 것이다. 
    마우스가 가는 곳으로 path를 옮기는 것.
    클릭하면 클릭한 위치가 그 path의 끝나는 지점으로서 선택된 것이다 
    */
  } else {
    ctx.lineTo(x, y);
    // lineTo()를 호출하면 이 점에서 여기로 연결되는 것이다.
    ctx.stroke();
  }
}

function onMouseDown(event) {
  painting = true;
}

if (canvas) {
  canvas.addEventListener("mousemove", noMouseMove);
  //캔버스 위의 마우스 움직임을 감지함.
  canvas.addEventListener("mousedown", startPainting);
  //마우스를 클릭했을 때
  canvas.addEventListener("mouseup", stopPainting);
  //마우스 클릭을 떼었을 때
  canvas.addEventListener("mouseleave", stopPainting);
  //마우스가 캔버스를 떠났을 때  + stopPainting함수를 사용함으로써 재사용성을 높임.
}

 

 

https://developer.mozilla.org/ko/docs/Web/API/CanvasRenderingContext2D

CanvasRenderingContext2D