[JS] 이번엔 그림앱이다! Canvas

JS에서 canvas를 사용해 브라우저에 2D 혹은 3D 그래픽을 그릴 수 있다.
html에서는 <canvas></canvas> 가 전부이고,
나머지 작업은 대부분 js에서 이루어진다.

1. JS에서 canvas 불러오기
- const canvas = document.querySelector("canvas");

2. context 작성
- context는 캔버스에 그림을 그릴 때 사용하는 붓이다.
- canvas.getContext 로 불러온 다음 2d를 선택한다. (주의! d 소문자임)

3. 캔버스 크기 설정
- css에서 캔버스 크기 설정을 한 후 js에서도 작성해준다.
- 이후에는 width 와 height를 js에서만 수정할 것임 (css에서 X)

4. 캔버스 위에 사각형 그리기
- canvas 좌표 시스템: 캔버스 좌상단이 좌표 0.0, 가로 X, 세로 Y
- 사각형 채우는 함수 fillRect 작성 -> ctx.fillRect(x값, y값, w값, h값);

5. 사실 사각형을 그리려면 기본적인 단계들을 하나씩 거쳐야 함
- 사각형 선 그리기: ctx.rect(10, 10, 100, 100);
- 선의 색이 적용되지 않아서 보이지 않는다
-> 다음 줄에 ctx.stroke() / ctx.fill() 해서 테두리만 그리거나 채울 수 있음
- 끊어가기를 원하는 데에 맨 앞부분에 ctx.beginPath();추가해줘서 새 경로 만들기.

*요약
- canvas에서 그림을 그릴 때는 단계별로 진행 필요
- 그린 그림들의 경로를 나눌 수 있음
-> 새 경로 시작하기: beginPath()

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;

ctx.rect(10, 10, 10, 10);
ctx.rect(20, 20, 10, 10);
ctx.fill();

ctx.beginPath();
ctx.rect(30, 30, 10, 10);
ctx.fillStyle = "red";
ctx.fill();

사실 rect 조차 shortcut function이었다는 점(빠밤)
더 작게 나눠진 function을 써보자! -> moveTo / lineTo

moveTo(x, y); -> 브러쉬의 좌표를 움직여줌
lineTo(x, y) -> 라인을 그려줌
*수평인 직선을 그리려면 두 y값이 같아야 한다
*라인이 끝난 점이 다음에 시작하는 브러쉬 좌표이다

선으로 사각형 그리기(연습)

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;

ctx.moveTo(50, 50);
ctx.lineTo(100, 50);
ctx.lineTo(100, 100);
ctx.lineTo(50, 100);
ctx.lineTo(50, 50);
ctx.stroke();

집 그리기 연습

여기도 순서가 중요하다.
linewidth 를 먼저 지정하고 strokeRect 를 그려야 적용이 된다.

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;

ctx.fillRect(200, 200, 25, 100);
ctx.fillRect(400, 200, 25, 100);
ctx.fillRect(300, 250, 25, 50);
ctx.fillRect(200, 150, 225, 50);
ctx.moveTo(200, 150);
ctx.lineTo(310, 100);
ctx.lineTo(426, 150);
ctx.fill();

사람 그리기

https://www.w3schools.com/tags/canvas_arc.asp

HTML canvas arc() Method

canvas.width = 800;
canvas.height = 800;

ctx.fillRect(210 - 40, 200 - 30, 15, 100);
ctx.fillRect(350 - 40, 200 - 30, 15, 100);
ctx.fillRect(260 - 40, 200 - 30, 60, 200);

ctx.arc(250, 100, 50, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(260 + 10, 80, 8, Math.PI, 2 * Math.PI);
ctx.arc(220 + 10, 80, 8, Math.PI, 2 * Math.PI);
ctx.fill();