JavaScript - 캔버스: 디지털 그리기入门 가이드

안녕하세요, 야심찬 프로그래머 여러분! JavaScript와 캔버스의 세계로 여러분을 안내하게 되어 기쁩니다. 10년 이상 컴퓨터 과학을 가르쳐온 사람으로서, 캔버스는 가장 재미있고 보람 있는 주제 중 하나라고 말할 수 있습니다. 웹 브라우저 내에 있는 디지털遊び터와 같은 것입니다!

캔버스는 무엇인가요?

코드로 들어가기 전에, 캔버스가 무엇인지 이해해 보겠습니다. 마음에 한 장의 텅 빈 종이와 컬러 펜 세트가 있다고 상상해 보세요. 디지털 세계에서 캔버스는 그와 같은 것입니다 - JavaScript를 사용하여 원하는 것을 그릴 수 있는 웹페이지의 텅 빈 영역입니다!

캔버스는 HTML5와 함께 도입되었으며, 그래픽, 애니메이션, 심지어는 브라우저 내에서 직접 게임을 만드는 강력한 도구로 자리 잡았습니다. 코드 편집기 내에 미니 아트 스튜디오를 가지고 있는 것과 같은 것입니다!

JavaScript로 캔버스를 다루기

이제 손을 구겨서 그리기 시작해 보겠습니다! 먼저, HTML에서 우리의 캔버스를 설정해야 합니다.

<canvas id="myCanvas" width="400" height="200"></canvas>

이렇게 하면 400 픽셀宽하고 200 픽셀 높이의 캔버스 요소가 만들어집니다. 이를 디지털 드로잉 보드라고 생각해 보세요.

캔버스 시작하기

우리의 캔버스에 그리기 시작하기 위해서는 JavaScript 코드에서 그것을 참조하고 그림 컨텍스트를 얻어야 합니다.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

getContext('2d') 메서드는 우리에게 2D 렌더링 컨텍스트를 제공해 주며, 이를 통해 캔버스에 그릴 수 있습니다.

도형 그리기

먼저 간단한 것으로 시작해 보겠습니다 - 사각형 그리기!

ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 75);

이 코드는 (50, 50) 좌표에서 시작하여宽 100 픽셀, 높이 75 픽셀의 파란 사각형을 그립니다. 디지털 펜에게 "여기서 파란 사각형을 그려, 이렇게 크게 하라!"라고 말하는 것과 같습니다.

선 그리기

이제 선을 그려 보겠습니다:

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

이 코드는 새로운 경로를 시작하고, "펜"을 (50, 50) 좌표로 이동시키고, (200, 100) 좌표로 선을 그린 후, 경로를 그려 보이게 합니다. 코드로 연결하는 것과 같은 놀이입니다!

원 그리기

smiley face를 그려 보겠습니다. 먼저 얼굴을 위한 원을 그리겠습니다:

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();

이 코드는 노란 원을 그리고, 검은 테두리를 추가합니다. arc 메서드는 조금 무서울 수 있지만, 펜에게 "이 위치에서 반지름 50의 원을 그려, 0에서부터 원을 돌아가라"라고 말하는 것입니다.

텍스트 추가하기

캔버스에 텍스트를 추가해 보겠습니다:

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 10, 30);

이 코드는 글자 크기를 20px Arial로 설정하고, 색상을 검정으로 하여 "Hello, Canvas!"라는 텍스트를 (10, 30) 좌표에서 그립니다.

예제

이제 기본 내용을 다루었으므로, 캔버스가 무엇을 할 수 있는지 보여주는 재미있는 예제를 몇 가지 살펴보겠습니다!

예제 1: 집 그리기

// 캔버스 설정
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 집 몸체 그리기
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

// 지붕 그리기
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fillStyle = 'red';
ctx.fill();

// 문 그리기
ctx.fillStyle = 'blue';
ctx.fillRect(150, 150, 50, 50);

// 창 그리기
ctx.fillStyle = 'yellow';
ctx.fillRect(200, 120, 30, 30);

이 코드는 간단한 집을 그립니다. 갈색 몸체, 빨간 지붕, 파란 문, 노란 창이 있습니다. 코드 블록으로 집을 짓는 것과 같습니다!

예제 2: 이동하는 원

이제 것을 움직여 보겠습니다! 이동하는 원의 간단한 애니메이션입니다:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
const radius = 20;

function drawCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}

x += dx;
y += dy;

requestAnimationFrame(drawCircle);
}

drawCircle();

이 코드는 캔버스 내에서 이동하는 녹색 원을 생성합니다. 펜으로 Pong 게임을 만드는 것과 같은 것입니다!

캔버스 메서드 표

이제 사용한 몇 가지 일반적인 캔버스 메서드와 몇 가지 추가 메서드를 정리한 표를 보여드리겠습니다:

메서드	설명
fillRect(x, y, width, height)	채워진 사각형 그리기
strokeRect(x, y, width, height)	사각형 테두리 그리기
clearRect(x, y, width, height)	지정된 사각형 영역 지우기
beginPath()	새로운 경로 시작
moveTo(x, y)	경로를 지정된 지점으로 이동
lineTo(x, y)	지정된 지점으로 선 그리기
arc(x, y, radius, startAngle, endAngle)	원 또는 아크 그리기
fill()	현재 경로 채우기
stroke()	현재 경로 테두리 그리기
fillText(text, x, y)	캔버스에 채워진 텍스트 그리기
strokeText(text, x, y)	캔버스에 텍스트 테두리 그리기

기억하시라, 코딩 배우기는 새로운 언어 배우는 것과 같습니다. 시간과 연습이 필요하지만, 깨달음을 얻기 전까지는 놀라운 것들을 캔버스로 만들 수 있을 것입니다! 다양한 도형과 메서드를 결합해 실험해 보고, 가장 중요한 것은 즐기는 것입니다. 누가 알겠는가? 다음 큰 웹 게임은 캔버스를 사용하여 당신이 만들 수 있을 것입니다!

Credits: Image by storyset