[Vanilla-JS] 4. 2D Context

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

 

canvas는 context를 갖고 있는 HTML의 요소인데,

우리는 그 요소 안에서 픽셀을 다루는것이다.

 

---

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

 

context의 default를 설정할거다.

context는 fillColor를 가지고 있다.

(fillStyle 색상이나 스타일을 shape안에 사용할 수 있다.)

 

---

이걸 사용하려는 사람이 저 색상을 첫 번째로 시작하도록 설정한거다.

우리가 그릴 선들이(context 안에 있는) 모두 이 색을 갖는다고 말해주는것.

 

이게 context의 lineWidth이다. (기억해둬야됨)

 

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

---

onMouseUp 도 mouseleave처럼 stopPainting을 넣어서 line logic을 넣지않겠다.

---

이제 stopPainting 함수와 유사한 용도로 startPainting 함수를 만들어보자.

---

우리가 신경써야할건 onMouseMove 함수이다.

여기서 모든 움직임을 감지하고 라인을 만들어야 되므로

 

path는 기본선이다. 우리는 path로 시작하고 움직일수가있다.

path를 색으로 채울 수도 있고 path를 닫을 수도 있다.

(path = 선 = line)

 

---

클릭하지 않고 그냥 캔버스 위에서 떠다니는 path를 만들어보자.

(내가 마우스를 움직이는 모든 순간에 path를 만든다.)

path를 만든다는 건 기본적으로 선, 선의 시작점을 만드는거다.

 

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

하지만 클릭하면 시작점부터 클릭한 곳까지 선을 만든다.

 

painting=false 상태이므로 마우스를 움직여도 그냥 path만 만들고 있는거다.

시작점이 beginPath

moveTo(x, y)는 마우스가 가는 곳으로 path를 옮기는거다. 

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

그리고 저 if 조건문은 클릭을 하면 실행되지 않는다. (클릭하면 paiting이 true 상태가 되므로)

 

else 조건은 lineTo를 사용할건데 현재 sub-path의 마지막 점을 특정 좌표와 직선으로 연결하는 기능을 한다.

---

지금은 path가 실행이 안될거다.

왜냐하면 path가 보이지 않으므로..

 

그래서 stroke를 사용할거다.

fill은 현재의 sub-path를 채우는거고, stroke는 현재의 sub-path에 획을 그음.

 

실제로 그리는건 stroke이고 lineTo는 그릴 위치들을 잡아주는거다.

이렇게 해도 실제 캔버스 픽셀 사이즈(pixel modifier)를 안줘서 실행이 안될거다.

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

width와 height를 지정해야줘야된다. 

 

 

 

※ lineTo와 stroke는 내가 마우스를 움직이는 내내 발생하는거다.

---

<코드기록>

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

canvas.width = 700;
canvas.height = 700; // css에서 설정한 캔버스 사이즈와 동일해야된다.

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

let painting = false; /* 기본값으로 false로 주고 클릭했을 때 true가 될거다. */

function startPainting() {
  painting = true;
}

function stopPainting() {
  painting = 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();
  }
}

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

 

<실행화면>

 

 

---

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.