2D context

 

 

canvas 태그는 

html의 한 요소인데, 

다른 점은 context를 갖는다는 것이다. 

 

context라는 건 이 요소 안에서 우리가 픽셀에 접근할 수 있는 방법이다. 

 

이론 적으로는 이 안에 있는 픽셀들인 것이다. 

 

매우 쉽게 이 context를 만들 수 있는데, 

 

아래와 같이 context variable을 만들면 된다.

 

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

 

2d뿐 아니라 많은 context가 있다. 3d.. 등등

 

그리고 나면 내가 할 수 있는 context는 모두 갖게 된다.

 

context로 라인도 그릴수 있고, 사각형, 색이 칠해진 사각형 등등 할 수 있다. 

 

** path는 line을 시작하는 것이다. 

 

하지만 painting을 할때엔 path가 필요하진 않다. 

painting을 하지 않을 때만 이걸 하길 원한다. 

 

클릭하지 않고 떠다니는 건 path를 만들겠다는 것이다. 

시작점에서부터 끝낼 때까지 라인을 만들기 위해 클릭하기를 기다리는 것이다. 

 

 

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

 

시작점은 마우스가 움직이는 곳이라면 어디든지 되는 것이다.

시작점부터 클릭한 곳까지 선을 만드는 것이다.

 

** 

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

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