Javascript | canvas API

canvas API?

Canvas API는 JavaScript와 HTML <canvas> 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.

Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 <canvas> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.

출처: mdn

canvas 준비

먼저 html에 <canvas> element를 넣어준다. 이 엘리먼트는 canvas API의 창이 된다.
이 후 모든 작업은 javascript에서 하게 된다!

const canvas = document.querySelector("canvas") // 그림을 그릴 도화지
const context = canvas.getContext("2d") // 그리기 위한 브러쉬

이렇게만 해주면 기본 준비 끝!

rect(), fill()

fillRect(), strokeRect()는 함축 함수이다.
사실 사각형을 그릴 때, 거쳐야하는 단계는 이렇다.

1. 선을 그린다. rect(x, y, width, height)
2. 기본 색상은 black이고 색상 변경을 원한다면 fillStyle을 사용.
3. 채울지, 테두리만 그릴 지 결정. fill() or stroke()

코드

context.rect(50, 50, 100, 100)
context.rect(150, 150, 100, 100)
context.fill()
context.rect(250, 250, 100, 100)
context.fillStyle = "pink"
context.fill()

검정 사각형 2개, 분홍색 사각형 1개가 그려질 것을 생각하고 이렇게 작성한다면 어떻게 나올까?

기대와 다르게 분홍색 사각형 3개가 그려진 것을 볼 수 있다.
왜냐하면 모두 같은 경로이기 때문이다. 원하는 대로 다른 색의 사각형을 만들기 위해서는 새로운 경로를 만들어 이전의 경로와 나눠줘야 한다. 이 때 필요한 것이 beginPath() !

beginPath()

코드

context.rect(50, 50, 100, 100)
context.rect(150, 150, 100, 100)
context.fill()

contex.beginPath() // 새 경로!
context.rect(250, 250, 100, 100)
context.fillStyle = "pink"
context.fill()

자란~! 원하던대로 검정 사각형 2개, 분홍 사각형 1개가 그려졌다😊

moveTo(), lineTo()

하지만 rect()도 함축 함수라면? rect()는 또 이렇게 나눠진다.

1. 그림을 시작할 좌표로 이동. moveTo(x, y)
2. 선을 그으며 좌표 이동. lineTo(x, y)

코드

context.moveTo(50, 50);
context.lineTo(150, 50);
context.lineTo(150, 150);
context.stroke();

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

그림 그려보기!

🏠집

코드

// 벽돌
context.fillRect(200, 200, 50, 200);
context.fillRect(400, 200, 50, 200);

// 문
context.lineWidth = 2;
context.strokeStyle = "orange";
context.strokeRect(300, 300, 50, 100);

// 지붕
context.fillRect(200, 200, 200, 20);
context.beginPath();
context.fillStyle = "darkred";
context.moveTo(200, 200);
context.lineTo(325, 100);
context.lineTo(450, 200);
context.fill();

👩사람 +) arc()

arc()?

원을 그릴 수 있는 함수!
arc(x, y, radius, startAngle, endAngle)

코드

//  팔
context.fillRect(215, 200, 15, 100);
context.fillRect(350, 200, 15, 100);

// 몸통
context.fillRect(260, 200, 60, 200);

// 머리
context.arc(290, 140, 50, 0, 2 * Math.PI);
context.fill();

//눈
context.beginPath();
context.fillStyle = "skyblue";
context.arc(270, 135, 8, Math.PI, 2 * Math.PI);
context.moveTo(310, 130); // 의도하지 않은 선을 없애기 위해 좌표 이동 후 두 번째 눈 그려주기
context.arc(310, 130, 8, 0, 2 * Math.PI);
context.fill();

지금 그린 것들은 매우 못생겼지만ㅋㅋㅋ, canvas를 잘 다룰 수 있게 된다면 멋진 2d 그래픽 구현 가능!

✅노마드코더 바닐라 JS로 그림 앱 만들기를 들으며 정리한 글입니다.