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

https://youtu.be/IlANstQ1h3M

---

<복습>

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

[JavaScript] #2.0 Canvas Events (#코딩공부)

 

<준비물>

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

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

CanvasRenderingContext2D

 

<코드기록>

// CanvasRenderingContext 2D 활용하기(3D로도 작업가능함)
// https://developer.mozilla.org/ko/docs/Web/API/CanvasRenderingContext2D


// context는 canvas 안에서 pixel들을 control하는 장치
const ctx = canvas.getContext("2d");


// 작업하고 있는 모든 line(선)들이 #2c2c2c(검정색) 색상을 갖음 */
ctx.strokeStyle = "#2c2c2c";
// 선의 너비가 2.5px
ctx.lineWidth = 2.5;


// 만약(if) 클릭하지 않고 mouse를 canvas 안에서 움직였을 때(!painting) 
// beginPath - path를 만들기 시작함
// moveTo - path를 만들면 mouse의 x, y좌표로 path를 옮김
if (!painting) {
    ctx.beginPath();
    ctx.moveTo(x, y);
// 그렇지 않고(else) mouse를 click해서 painting를 하면
// lineTo - 그 전 x, y좌표의 path에서 현재 x, y좌표의 path까지 직선(line)으로 연결함
// 그리고 stroke(선을 긋는 것)으로 아주 작은 line(선)들을 끊임없이 이어나감
  } else {
    ctx.lineTo(x, y);
    ctx.stroke();
  }


// 최종 코드
const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");

canvas.width = 550;
canvas.height = 550;

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

let painting = false;

function stopPainting() {
  painting = false;
}

function startPainting() {
  painting = true;
}

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

function onMouseDown(event) {
  painting = true;
}

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

---

1. CanvasRenderingContext 2D MDN

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

CanvasRenderingContext2D

canvas는 어마어마한 능력을 갖고있는 html5의 한 요소이다. 그 능력은 canvas 안에 있는 pixel들을 다룰 수 있는 것이다. 이것은 canvas.getContext를 통해서 표현할 수 있고, 위에 예시처럼 코드를 작성하면 무수히 많은 점들이 이어지며 집이 지어진다.

 

lineWidth는 10px로 굵게 하고, strokeRect로 벽(wall) 꾸미고, fillRect로 문(door)을 채우고, 각각의 x, y에서 x, y까지 moveTo(움직이고) lineTo(선을 연결)한 뒤 closePath로 연결한 선을 가두고 마지막으로 stroke으로 선을 그으면 끝

---

2. canvas.getContext("2d")

canvas.getContext("2d")로 context를 2d로 표현했다. strokeStyle로 #2c2c2c인 검정색으로 stroke 색깔을 정하고, lineWidth는 2.5 폭으로 정했다.

 

context는 canvas 안에서 pixel들을 control하는 장치이다. 쉽게 말해, 수많은 작은 pixel들로 그림을 그리는 것이다.

 

저번 시간에 만들어뒀던 Control Bar로 lineWidth를 조절할 것이다.

---

3. Path

Path는 click event가 발생해서 canvas에 무엇인가가 입력되기 전, 즉 canvas에서 mouse를 따라 가상으로 그려지는 path(경로)라고 생각하면 된다.

 

이 Path로 line(선)의 시작점을 만들고, canvas 안 어디든지 mouse가 가는 곳은 beginPath(시작점)이 된다.

 

moveTo는 path를 mouse의 x, y좌표로 path를 옮기는 것이고, lineTo는 그 전 x, y좌표의 path에서 현재 x, y좌표의 path까지를 직선(line)으로 연결하는 것이다.

 

if painting 중이 아닐경우(!), 즉 canvas 안에서 click event가 발생하지 않고 그냥 mouse를 움직이기만 했을 때는 beginPath를 시작해서 시작점(x, y)를 찾고, moveTo로 다른 x, y좌표까지 이동한다.

 

그리고 반대로(else) canvas에서 mouse가 click되서 painting이 시작되면, lineTo(직선) 그 전 x, y좌표의 path에서 현재 x, y좌표의 path까지 직선으로 연결한다.

 

Drawing paths 중 stroke(획을 긋는 것)으로 직선을 표시하면 canvas에 그림을 그릴 수 있게 된다.

 

pixel을 다루는 window(canvas의 크기)가 얼마나 큰지 canvas에게 알려주기 위해 canvas.width, canvas.height 추가하고, stroke(선을 긋는 것)으로 아주 작은 pixel을 연결한 line(선)들을 끊임없이 이어준다.

 

---

※ 코로나19 조심하세요!!!!