JavaScript 캔버스 API: 2D 그래픽 그리기의 세계로 떠나는 모험! 🎨✨

안녕하세요, 창의적인 개발자 여러분! 오늘은 정말 흥미진진한 주제로 여러분을 모시게 되었습니다. 바로 JavaScript 캔버스 API를 사용한 2D 그래픽 그리기에 대해 알아볼 거예요. 🚀 이 여정을 통해 여러분은 단순한 코드 몇 줄로 놀라운 시각적 효과를 만들어내는 마법 같은 경험을 하게 될 거예요!

여러분, 혹시 어릴 때 크레용이나 물감으로 그림 그리는 걸 좋아하셨나요? 아니면 지금도 취미로 그림을 그리시나요? 그렇다면 이 주제는 여러분에게 정말 흥미진진한 모험이 될 거예요! JavaScript 캔버스 API는 마치 디지털 세상의 크레용 세트 같은 존재거든요. 🖍️✨

이 글을 통해 우리는 함께 코드로 그림을 그리는 방법을 배우게 될 거예요. 단순한 도형부터 시작해서 복잡한 애니메이션까지, 여러분의 상상력을 현실로 만들어내는 놀라운 여정이 될 거예요. 마치 마법사가 되어 코드로 그림을 그리는 느낌이랄까요? 🧙‍♂️✨

그리고 여러분, 아시나요? 이런 skills을 익히면 재능넷같은 플랫폼에서 여러분의 재능을 공유하고, 더 나아가 수익까지 창출할 수 있답니다! 웹 개발자로서의 여러분의 가치가 한층 더 높아질 거예요. 😉💼

자, 이제 우리의 디지털 캔버스를 펼치고, 코드라는 붓을 들어 멋진 그래픽의 세계로 떠나볼까요? 준비되셨나요? 그럼 시작해볼까요! 🎨🖥️

1. Canvas API: 우리의 디지털 놀이터 소개 🎡

자, 여러분! 우리의 첫 번째 모험은 Canvas API라는 신비로운 놀이터를 탐험하는 거예요. 이 놀이터는 우리가 상상하는 모든 그래픽을 현실로 만들어낼 수 있는 마법의 공간이랍니다. 😊

Canvas API는 HTML5에서 소개된 강력한 그래픽 도구예요. 이 도구를 사용하면 웹 페이지에 동적이고 대화형 그래픽을 그릴 수 있어요. 마치 디지털 세상의 크레용 세트처럼 말이죠!

Canvas는 영어로 '캔버스'라는 뜻인데, 실제 화가들이 그림을 그리는 천 캔버스를 생각하면 이해하기 쉬워요. 우리는 이 디지털 캔버스 위에 JavaScript라는 붓으로 그림을 그리게 될 거예요. 🖌️

Canvas API의 특징을 간단히 살펴볼까요?

🔹 픽셀 기반 그래픽: Canvas는 픽셀 단위로 그림을 그려요. 이는 매우 세밀한 제어가 가능하다는 뜻이에요.
🔹 즉시 모드 렌더링: 그린 내용이 바로바로 화면에 나타나요. 마치 실제로 붓으로 그리는 것처럼 말이죠!
🔹 다양한 그리기 기능: 선, 도형, 텍스트, 이미지 등 다양한 요소를 그릴 수 있어요.
🔹 애니메이션 지원: 움직이는 그래픽을 만들 수 있어요. 마치 만화를 그리는 것처럼요!
🔹 성능이 우수: 복잡한 그래픽도 빠르게 처리할 수 있어요.

Canvas API를 사용하면 정말 다양한 것들을 만들 수 있어요. 예를 들면:

🎮 간단한 2D 게임
📊 데이터 시각화
🖼️ 사진 편집 도구
🌈 실시간으로 변하는 배경화면
✍️ 그림 그리기 앱

여러분, 이렇게 다양한 것들을 만들 수 있다니 정말 신나지 않나요? 🤩 Canvas API를 배우면 여러분의 웹 개발 스킬이 한층 더 업그레이드될 거예요. 그리고 이런 skills은 재능넷과 같은 플랫폼에서 여러분의 가치를 높이는 데 큰 도움이 될 거예요!

자, 이제 우리의 디지털 캔버스를 준비해볼까요? 다음 섹션에서는 Canvas를 HTML에 추가하고 JavaScript로 조작하는 방법을 배워볼 거예요. 여러분의 첫 디지털 그림을 그릴 준비가 되셨나요? Let's go! 🚀

2. 캔버스 설정하기: 우리의 그림판을 준비해요! 🖼️

안녕하세요, 꿈꾸는 개발자 여러분! 이제 우리의 디지털 그림판을 준비할 시간이에요. 마치 화가가 새 캔버스를 이젤에 설치하는 것처럼, 우리도 웹 페이지에 캔버스를 설치해볼 거예요. 준비되셨나요? 자, 시작해볼까요! 🎨

2.1 HTML에 Canvas 요소 추가하기

먼저, HTML 파일에 canvas 요소를 추가해야 해요. 이것이 우리의 그림판이 될 거예요!

<canvas id="myCanvas" width="500" height="300">
  죄송합니다. 귀하의 브라우저는 Canvas를 지원하지 않습니다.
</canvas>

여기서 몇 가지 중요한 점을 살펴볼까요?

🔸 id 속성: 'myCanvas'라는 id를 지정했어요. 이렇게 하면 나중에 JavaScript에서 이 캔버스를 쉽게 찾을 수 있어요.
🔸 width와 height: 캔버스의 크기를 지정했어요. 여기서는 500x300 픽셀로 설정했지만, 여러분의 필요에 따라 조절할 수 있어요.
🔸 대체 텍스트: Canvas를 지원하지 않는 브라우저를 위해 대체 텍스트를 넣었어요. 친절한 개발자가 되는 첫걸음이죠! 😉

2.2 JavaScript로 Canvas 조작하기

HTML에 캔버스를 추가했으니, 이제 JavaScript로 이 캔버스를 조작해볼 차례예요. 마치 화가가 팔레트와 붓을 준비하는 것처럼 말이에요! 🎨

// Canvas 요소 가져오기
const canvas = document.getElementById('myCanvas');

// 2D 렌더링 컨텍스트 가져오기
const ctx = canvas.getContext('2d');

이 코드가 하는 일을 자세히 살펴볼까요?

🔹 canvas 요소 가져오기: document.getElementById()를 사용해 우리가 만든 캔버스를 찾아요. 마치 그림을 그릴 종이를 찾는 것과 같죠!
🔹 렌더링 컨텍스트 가져오기: getContext('2d')를 호출해 2D 렌더링 컨텍스트를 가져와요. 이게 바로 우리의 그리기 도구에요!

렌더링 컨텍스트는 실제로 그림을 그리는 데 사용되는 객체예요. 이 객체를 통해 선을 그리고, 색을 칠하고, 도형을 만들 수 있어요. 마치 화가의 붓과 물감 같은 존재죠!

2.3 Canvas 스타일링하기

캔버스를 만들었지만, 아직 눈에 보이지 않을 수 있어요. 캔버스에 테두리를 추가해 눈에 잘 보이게 만들어볼까요?

canvas.style.border = '1px solid black';

이렇게 하면 캔버스 주위에 검은색 테두리가 생겨서 우리의 그림판이 어디 있는지 쉽게 알 수 있어요!

2.4 Canvas 크기 조정하기

때로는 캔버스의 크기를 동적으로 변경해야 할 때가 있어요. 예를 들어, 사용자의 화면 크기에 맞춰 캔버스 크기를 조절하고 싶을 수 있죠. 이럴 때는 이렇게 할 수 있어요:

// 캔버스 크기를 창 크기에 맞추기
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

이 코드는 캔버스의 크기를 브라우저 창의 크기와 똑같이 만들어요. 마치 그림을 그릴 종이를 창문 크기만큼 자르는 것과 같죠!

주의할 점은, 캔버스의 크기를 변경하면 캔버스의 내용이 지워진다는 거예요. 따라서 크기를 변경한 후에는 다시 그림을 그려야 해요. 이건 마치 새 종이로 바꾸는 것과 같아요!

2.5 Canvas 지우기

때로는 캔버스를 깨끗이 지우고 새로 시작하고 싶을 때가 있죠. 이럴 때는 clearRect() 메서드를 사용해요:

// 캔버스 전체 지우기
ctx.clearRect(0, 0, canvas.width, canvas.height);

이 메서드는 지정된 직사각형 영역을 투명하게 만들어요. 여기서는 캔버스 전체를 지정했으니, 모든 그림이 지워지는 거죠. 마치 지우개로 종이를 깨끗이 지우는 것과 같아요!

자, 이제 우리의 디지털 그림판이 준비되었어요! 🎉 HTML에 캔버스를 추가하고, JavaScript로 조작하는 방법을 배웠죠. 캔버스에 테두리를 추가하고, 크기를 조절하고, 내용을 지우는 방법도 알게 되었어요.

여러분, 이제 정말 그림을 그릴 준비가 다 되었어요! 다음 섹션에서는 실제로 이 캔버스 위에 그림을 그리는 방법을 배워볼 거예요. 여러분의 창의력을 마음껏 발휘할 준비가 되셨나요? 그럼 계속해서 우리의 Canvas API 모험을 이어가볼까요? Let's go! 🚀🎨

3. 기본 도형 그리기: 우리의 첫 걸음! 🔷🔶🔴

안녕하세요, 열정 넘치는 개발자 여러분! 이제 우리는 실제로 캔버스에 그림을 그리기 시작할 거예요. 마치 어린 시절 크레용을 처음 잡았을 때처럼 설레지 않나요? 😊 자, 이제 기본적인 도형들을 그리는 방법을 배워볼까요?

3.1 직선 그리기: 우리의 첫 붓질! ➖

가장 먼저 배울 것은 직선 그리기예요. 직선은 모든 그림의 기초가 되죠. 점 두 개만 있으면 어디든 선을 그을 수 있어요!

// 선 그리기 시작
ctx.beginPath();
// 시작점으로 이동
ctx.moveTo(50, 50);
// 끝점까지 선 그리기
ctx.lineTo(200, 50);
// 선 색상 설정
ctx.strokeStyle = 'blue';
// 선 두께 설정
ctx.lineWidth = 5;
// 선 그리기
ctx.stroke();

이 코드가 하는 일을 자세히 살펴볼까요?

🔹 beginPath(): 새로운 경로를 시작해요. 마치 종이에 연필을 대는 것과 같죠!
🔹 moveTo(x, y): 선의 시작점을 정해요. 여기서는 (50, 50) 위치로 "연필"을 옮겼어요.
🔹 lineTo(x, y): 선의 끝점을 정해요. (200, 50)까지 선을 그었어요.
🔹 strokeStyle: 선의 색상을 정해요. 파란색으로 설정했네요!
🔹 lineWidth: 선의 두께를 정해요. 5픽셀로 설정했어요.
🔹 stroke(): 실제로 선을 그려요. 이 메서드를 호출해야 선이 캔버스에 나타나요!

이렇게 하면 캔버스에 파란색의 가로선이 그려져요! 마치 처음으로 똑바로 선을 그은 것 같은 기분이 들지 않나요? 😄

3.2 사각형 그리기: 네모네모 세상! 🟥

이번에는 사각형을 그려볼까요? 사각형은 우리 주변에서 가장 흔히 볼 수 있는 도형이죠. Canvas API에서는 사각형을 그리는 두 가지 방법이 있어요.

3.2.1 채워진 사각형 그리기

// 빨간색으로 채워진 사각형 그리기
ctx.fillStyle = 'red';
ctx.fillRect(50, 100, 150, 100);

이 코드는 다음과 같은 일을 해요:

🔸 fillStyle: 채우기 색상을 빨간색으로 설정해요.
🔸 fillRect(x, y, width, height): (50, 100) 위치에 너비 150, 높이 100인 사각형을 그리고 채워요.

3.2.2 테두리만 있는 사각형 그리기

// 초록색 테두리의 사각형 그리기
ctx.strokeStyle = 'green';
ctx.lineWidth = 3;
ctx.strokeRect(250, 100, 150, 100);

이 코드의 역할은:

🔸 strokeStyle: 선 색상을 초록색으로 설정해요.
🔸 lineWidth: 선 두께를 3픽셀로 설정해요.
🔸 strokeRect(x, y, width, height): (250, 100) 위치에 너비 150, 높이 100인 테두리만 있는 사각형을 그려요.

이렇게 하면 캔버스에 빨간색으로 채워진 사각형과 초록색 테두리의 사각형이 나란히 그려져요! 마치 레고 블록을 쌓는 것 같지 않나요? 😊

3.3 원 그리기: 동그라미 세상! 🔴

이제 원을 그려볼 차례예요. 원은 우리 주변의 많은 것들을 표현할 수 있는 아름다운 도형이죠. 하지만 Canvas API에는 원을 직접 그리는 메서드가 없어요. 대신 호(arc)를 이용해 원을 그릴 수 있답니다!

// 보라색 원 그리기
ctx.beginPath();
ctx.arc(200, 300, 50, 0, Math.PI * 2);
ctx.fillStyle = 'purple';
ctx.fill();

이 코드가 하는 일을 자세히 살펴볼까요?

🔹 beginPath(): 새로운 경로를 시작해요.
🔹 arc(x, y, radius, startAngle, endAngle):
- (x, y)는 원의 중심점이에요. 여기서는 (200, 300)이죠.
- radius는 반지름이에요. 50픽셀로 설정했어요.
- startAngle과 endAngle은 호의 시작과 끝 각도예요. 0부터 2π(Math.PI * 2)까지 설정해 완전한 원을 그렸어요.
🔹 fillStyle: 채우기 색상을 보라색으로 설정해요.
🔹 fill(): 경로를 채워서 원을 완성해요.

이렇게 하면 캔버스에 보라색 원이 그려져요! 마치 포도를 그린 것 같지 않나요? 🍇

3.4 삼각형 그리기: 뾰족뾰족 세상! 🔺

마지막으로 삼각형을 그려볼까요? 삼각형은 세 개의 점만 있으면 그릴 수 있는 간단하면서도 강력한 도형이에요.

// 노란색 삼각형 그리기
ctx.beginPath();
ctx.moveTo(200, 150);
ctx.lineTo(150, 250);
ctx.lineTo(250, 250);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();

이 코드의 역할은:

🔸 beginPath(): 새로운 경로를 시작해요.
🔸 moveTo(x, y): 첫 번째 꼭지점으로 이동해요.
🔸 lineTo(x, y): 두 번째와 세 번째 꼭지점으로 선을 그어요.
🔸 closePath(): 경로를 닫아 삼각형을 완성해요.
🔸 fillStyle: 채우기 색상을 노란색으로 설정해요.
🔸 fill(): 경로를 채워서 삼각형을 완성해요.

이렇게 하면 캔버스에 노란색 삼각형이 그려져요! 마치 피라미드를 그린 것 같지 않나요? 🏜️

자, 여러분! 이제 우리는 기본적인 도형들을 그리는 방법을 배웠어요. 직선, 사각형, 원, 삼각형... 이 네 가지만으로도 정말 다양한 그림을 그릴 수 있답니다. 마치 기본 블록들로 복잡한 레고 모형을 만드는 것처럼 말이에요! 🏗️

이런 기본 도형 그리기 skills은 재능넷과 같은 플랫폼에서 웹 디자인이나 데이터 시각화 프로젝트를 할 때 정말 유용하게 쓰일 거예요. 여러분의 창의력을 마음껏 발휘해보세요!

다음 섹션에서는 이 도형들에 색상을 입히고, 그라데이션을 적용하는 등 더 아름답게 만드는 방법을 배워볼 거예요. 여러분의 캔버스가 점점 더 화려해지고 있어요! 계속해서 우리의 Canvas API 모험을 이어가볼까요? Let's keep drawing! 🎨✨

4. 색상과 스타일: 우리의 그림에 생명을 불어넣어요! 🌈✨

안녕하세요, 창의적인 개발자 여러분! 이제 우리는 기본 도형을 그리는 방법을 알게 되었어요. 하지만 단색의 도형들만으로는 뭔가 부족하지 않나요? 그래서 이번에는 우리의 그림에 색상과 스타일을 입혀 더욱 생동감 있게 만들어볼 거예요. 마치 흑백 TV에서 컬러 TV로 업그레이드하는 것처럼 말이죠! 😉

4.1 색상 사용하기: 무지개를 그려봐요! 🌈

Canvas에

Canvas에서 색상을 사용하는 방법은 여러 가지가 있어요. 가장 기본적인 방법부터 살펴볼까요?

4.1.1 기본 색상 이름 사용하기

ctx.fillStyle = 'red';
ctx.strokeStyle = 'blue';

이렇게 하면 채우기 색상은 빨간색, 선 색상은 파란색이 돼요. 정말 간단하죠?

4.1.2 RGB와 RGBA 값 사용하기

ctx.fillStyle = 'rgb(255, 0, 0)';  // 빨간색
ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';  // 반투명 파란색

RGB는 Red, Green, Blue의 약자예요. 각 색상의 강도를 0부터 255 사이의 숫자로 표현해요. RGBA에서 A는 Alpha를 의미하며, 0(완전 투명)부터 1(완전 불투명) 사이의 값을 가져요.

4.1.3 16진수 색상 코드 사용하기

ctx.fillStyle = '#FF0000';  // 빨간색
ctx.strokeStyle = '#0000FF';  // 파란색

웹 개발을 해보셨다면 이 방식이 익숙하실 거예요. 각 두 자리가 Red, Green, Blue를 나타내요.

4.2 그라데이션 적용하기: 색의 향연을 만들어요! 🎨

단색도 좋지만, 그라데이션을 사용하면 더욱 멋진 효과를 낼 수 있어요. Canvas API는 선형 그라데이션과 원형 그라데이션을 지원해요.

4.2.1 선형 그라데이션

// 왼쪽에서 오른쪽으로 빨간색에서 파란색으로 변하는 그라데이션
let gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

createLinearGradient(x0, y0, x1, y1)는 그라데이션의 시작점(x0, y0)과 끝점(x1, y1)을 지정해요. addColorStop(position, color)은 그라데이션의 색상 분포를 정해요. position은 0(시작)부터 1(끝) 사이의 값을 가져요.

4.2.2 원형 그라데이션

// 중앙에서 바깥쪽으로 흰색에서 검은색으로 변하는 그라데이션
let gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 100);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'black');

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 200);

createRadialGradient(x0, y0, r0, x1, y1, r1)는 두 개의 원을 지정해요. 첫 번째 원의 중심은 (x0, y0), 반지름은 r0이고, 두 번째 원의 중심은 (x1, y1), 반지름은 r1이에요.

4.3 그림자 효과 주기: 입체감을 더해요! 🕴️

그림자를 추가하면 우리의 그림이 더욱 입체적으로 보일 거예요. Canvas API에서는 텍스트와 도형 모두에 그림자를 줄 수 있어요.

ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

ctx.fillStyle = 'orange';
ctx.fillRect(20, 20, 150, 100);

이 코드는 다음과 같은 일을 해요:

🔸 shadowOffsetX와 shadowOffsetY: 그림자의 위치를 지정해요. 양수 값은 오른쪽과 아래쪽으로 이동해요.
🔸 shadowBlur: 그림자의 흐림 정도를 지정해요.
🔸 shadowColor: 그림자의 색상을 지정해요.

이렇게 하면 오렌지색 사각형에 회색 그림자가 생겨요! 마치 사각형이 공중에 떠 있는 것처럼 보이지 않나요? 😮

4.4 패턴 사용하기: 반복의 미학을 느껴봐요! 🔁

때로는 단순한 색상이나 그라데이션보다 더 복잡한 패턴이 필요할 때가 있어요. Canvas API를 사용하면 이미지를 패턴으로 사용할 수 있답니다.

let img = new Image();
img.src = 'pattern.png';
img.onload = function() {
    let pattern = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, 200, 200);
};

이 코드는 'pattern.png' 이미지를 로드하고, 그 이미지를 반복해서 사각형을 채워요. 'repeat' 대신 'repeat-x', 'repeat-y', 'no-repeat'를 사용해 패턴의 반복 방식을 조절할 수 있어요.

여러분, 이렇게 색상과 스타일을 사용하면 우리의 그림이 얼마나 풍성해지는지 느껴지시나요? 🌟 단순한 도형들이 생동감 넘치는 작품으로 변하는 걸 보면 정말 신기하죠?

이런 색상과 스타일 적용 skills은 재능넷에서 웹 디자인 프로젝트를 할 때 큰 도움이 될 거예요. 여러분만의 독특한 스타일로 멋진 작품을 만들어보세요!

다음 섹션에서는 이 모든 것을 활용해 실제로 간단한 그림을 그려볼 거예요. 여러분의 상상력을 마음껏 발휘할 준비가 되셨나요? 그럼 계속해서 우리의 Canvas API 모험을 이어가볼까요? Let's make some art! 🎨🖼️

5. 간단한 그림 그리기: 우리의 상상력을 캔버스에 담아요! 🖼️✨

안녕하세요, 열정 가득한 개발자 여러분! 지금까지 우리는 기본 도형을 그리고, 색상과 스타일을 적용하는 방법을 배웠어요. 이제 이 모든 것을 종합해서 실제로 간단한 그림을 그려볼 시간이에요. 여러분의 상상력을 마음껏 발휘해 볼까요? 😊

5.1 귀여운 집 그리기: 우리만의 아늑한 공간을 만들어요! 🏠

먼저, 아주 간단하면서도 귀여운 집을 그려볼 거예요. 이 집은 사각형 모양의 본체와 삼각형 모양의 지붕, 그리고 창문과 문으로 구성될 거예요.

// 하늘 그리기
ctx.fillStyle = 'skyblue';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 잔디 그리기
ctx.fillStyle = 'limegreen';
ctx.fillRect(0, 350, canvas.width, 150);

// 집 본체 그리기
ctx.fillStyle = 'beige';
ctx.fillRect(150, 200, 200, 200);

// 지붕 그리기
ctx.fillStyle = 'brown';
ctx.beginPath();
ctx.moveTo(150, 200);
ctx.lineTo(250, 100);
ctx.lineTo(350, 200);
ctx.closePath();
ctx.fill();

// 창문 그리기
ctx.fillStyle = 'lightblue';
ctx.fillRect(180, 240, 50, 50);
ctx.fillRect(270, 240, 50, 50);

// 문 그리기
ctx.fillStyle = 'saddlebrown';
ctx.fillRect(230, 300, 40, 100);

// 문 손잡이 그리기
ctx.fillStyle = 'gold';
ctx.beginPath();
ctx.arc(260, 350, 5, 0, Math.PI * 2);
ctx.fill();

// 태양 그리기
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(50, 50, 30, 0, Math.PI * 2);
ctx.fill();

// 태양 광선 그리기
ctx.strokeStyle = 'orange';
ctx.lineWidth = 2;
for(let i = 0; i < 8; i++) {
    ctx.beginPath();
    ctx.moveTo(50, 50);
    let angle = i * Math.PI / 4;
    ctx.lineTo(50 + Math.cos(angle) * 50, 50 + Math.sin(angle) * 50);
    ctx.stroke();
}

이 코드는 다음과 같은 요소들을 그려요:

🔹 하늘색 배경
🔹 초록색 잔디
🔹 베이지색 집 본체
🔹 갈색 지붕
🔹 하늘색 창문 두 개
🔹 갈색 문과 금색 손잡이
🔹 노란색 태양과 주황색 광선

이렇게 하면 아주 귀여운 집 그림이 완성돼요! 마치 동화책에서 튀어나온 것 같은 아늑한 집이죠? 😊🏠

5.2 간단한 풍경화 그리기: 자연의 아름다움을 담아봐요! 🌄

이번에는 조금 더 복잡한 그림을 그려볼까요? 산, 나무, 호수가 있는 아름다운 풍경화를 그려볼 거예요.

// 하늘 그리기 (그라데이션)
let skyGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
skyGradient.addColorStop(0, 'lightblue');
skyGradient.addColorStop(1, 'white');
ctx.fillStyle = skyGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 산 그리기
ctx.fillStyle = 'darkgreen';
ctx.beginPath();
ctx.moveTo(0, 200);
ctx.lineTo(200, 300);
ctx.lineTo(400, 150);
ctx.lineTo(600, 300);
ctx.lineTo(canvas.width, 200);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.fill();

// 호수 그리기
ctx.fillStyle = 'royalblue';
ctx.beginPath();
ctx.moveTo(0, 350);
ctx.quadraticCurveTo(canvas.width/2, 450, canvas.width, 350);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.fill();

// 태양 그리기
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(500, 100, 50, 0, Math.PI * 2);
ctx.fill();

// 나무 그리기 함수
function drawTree(x, y) {
    // 나무 기둥
    ctx.fillStyle = 'saddlebrown';
    ctx.fillRect(x - 10, y, 20, 80);
    
    // 나뭇잎
    ctx.fillStyle = 'forestgreen';
    ctx.beginPath();
    ctx.moveTo(x, y - 60);
    ctx.lineTo(x - 40, y + 20);
    ctx.lineTo(x + 40, y + 20);
    ctx.closePath();
    ctx.fill();
}

// 여러 나무 그리기
drawTree(100, 300);
drawTree(300, 320);
drawTree(500, 340);

// 구름 그리기 함수
function drawCloud(x, y) {
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(x, y, 30, 0, Math.PI * 2);
    ctx.arc(x + 30, y - 10, 30, 0, Math.PI * 2);
    ctx.arc(x + 60, y, 30, 0, Math.PI * 2);
    ctx.arc(x + 30, y + 10, 30, 0, Math.PI * 2);
    ctx.fill();
}

// 여러 구름 그리기
drawCloud(100, 100);
drawCloud(400, 70);

이 코드는 다음과 같은 요소들을 그려요:

🔹 하늘색에서 흰색으로 변하는 그라데이션 하늘
🔹 초록색 산맥
🔹 파란색 호수
🔹 노란색 태양
🔹 여러 개의 나무
🔹 하늘에 떠 있는 구름들

이렇게 하면 아름다운 자연 풍경화가 완성돼요! 마치 우리가 그 풍경 속에 서 있는 것 같지 않나요? 🌄

5.3 나만의 그림 그리기: 상상력의 나래를 펼쳐봐요! 🎨

자, 이제 여러분 차례예요! 지금까지 배운 모든 것을 활용해서 여러분만의 독특한 그림을 그려보세요. 우주 공간, 해저 세계, 판타지 세계... 무엇이든 좋아요. 여러분의 상상력을 마음껏 펼쳐보세요!

여기 몇 가지 아이디어를 드릴게요:

🚀 우주 탐사선과 행성들이 있는 우주 공간
🐠 다양한 물고기와 산호초가 있는 해저 세계
🏰 마법의 성과 용이 날아다니는 판타지 세계
🌆 미래의 도시 풍경
🎢 다양한 놀이기구가 있는 놀이공원

그림을 그릴 때는 이런 점들을 고려해보세요:

🔸 다양한 도형을 조합해 복잡한 형태를 만들어보세요.
🔸 그라데이션을 활용해 입체감을 표현해보세요.
🔸 그림자를 사용해 깊이감을 더해보세요.
🔸 반복되는 요소는 함수로 만들어 재사용해보세요.
🔸 색상의 조화를 고려해 전체적인 분위기를 만들어보세요.

여러분이 그린 그림은 여러분만의 독특한 스타일과 창의성을 담고 있을 거예요. 그 과정에서 Canvas API의 다양한 기능을 실험해보고, 새로운 기술을 발견하게 될 거예요. 😊

이렇게 그림을 그리는 과정은 단순히 코딩 실력을 향상시키는 것 이상의 의미가 있어요. 여러분의 창의성을 키우고, 문제 해결 능력을 향상시키며, 시각적 표현 능력을 발전시킬 수 있답니다.

여러분이 만든 작품을 재능넷에 공유해보는 건 어떨까요? 여러분의 독특한 스타일과 창의성이 담긴 작품은 많은 사람들에게 영감을 줄 수 있을 거예요. 또한, 이런 경험은 앞으로 웹 디자인이나 데이터 시각화 프로젝트를 할 때 큰 도움이 될 거예요.

자, 이제 여러분의 상상력을 캔버스에 담아볼 시간이에요. 여러분만의 멋진 작품을 기대하고 있을게요! Happy drawing! 🎨✨

6. 애니메이션 만들기: 우리의 그림에 생명을 불어넣어요! 🎬✨

안녕하세요, 창의적인 개발자 여러분! 지금까지 우리는 정적인 그림을 그리는 방법을 배웠어요. 하지만 웹의 세계는 동적이고 살아있죠. 그래서 이번에는 우리의 그림에 움직임을 더해 애니메이션을 만들어볼 거예요. 준비되셨나요? 🚀

6.1 기본 애니메이션 원리 이해하기

애니메이션의 기본 원리는 간단해요. 빠르게 변화하는 일련의 이미지를 연속해서 보여주는 거죠. Canvas에서는 이를 구현하기 위해 다음과 같은 단계를 따라요:

캔버스를 지웁니다.
도형의 새로운 위치나 모양을 계산합니다.
새로운 프레임을 그립니다.
잠시 후에 이 과정을 반복합니다.

이를 JavaScript로 구현하면 다음과 같아요:

function animate() {
    // 캔버스 지우기
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 새로운 프레임 계산 및 그리기
    // ... 여기에 그리기 코드 ...
    
    // 다음 프레임 요청
    requestAnimationFrame(animate);
}

// 애니메이션 시작
animate();

requestAnimationFrame()은 브라우저에게 다음 리페인트 전에 애니메이션을 업데이트하라고 요청해요. 이 메서드는 초당 약 60번 호출되어 부드러운 애니메이션을 만들어줍니다.

6.2 간단한 애니메이션 만들기: 움직이는 공

자, 이제 실제로 간단한 애니메이션을 만들어볼까요? 화면을 가로질러 움직이는 공을 만들어봐요.

let x = 0;
let y = canvas.height / 2;
let dx = 5;  // x 방향 속도

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    drawBall();
    
    // 공의 위치 업데이트
    x += dx;
    
    // 벽에 부딪히면 방향 전환
    if (x + 20 > canvas.width || x - 20 < 0) {
        dx = -dx;
    }
    
    requestAnimationFrame(animate);
}

animate();

이 코드는 다음과 같은 일을 해요:

🔹 빨간 공을 그리는 drawBall() 함수를 정의해요.
🔹 animate() 함수에서 캔버스를 지우고, 공을 그리고, 공의 위치를 업데이트해요.
🔹 공이 화면 끝에 도달하면 방향을 바꿔요.
🔹 requestAnimationFrame()을 사용해 애니메이션을 계속 실행해요.

이렇게 하면 화면을 좌우로 움직이는 공 애니메이션이 완성돼요! 마치 탁구 게임의 공처럼 보이지 않나요? 😊

6.3 복잡한 애니메이션 만들기: 비 내리는 장면

이번에는 조금 더 복잡한 애니메이션을 만들어볼까요? 비가 내리는 장면을 만들어봐요.

let raindrops = [];

function createRaindrop() {
    return {
        x: Math.random() * canvas.width,
        y: 0,
        length: Math.random() * 20 + 10,
        speed: Math.random() * 5 + 5
    };
}

function drawRaindrops() {
    ctx.strokeStyle = 'lightblue';
    ctx.lineWidth = 1;
    for (let drop of raindrops) {
        ctx.beginPath();
        ctx.moveTo(drop.x, drop.y);
        ctx.lineTo(drop.x, drop.y + drop.length);
        ctx.stroke();
    }
}

function updateRaindrops() {
    for (let drop of raindrops) {
        drop.y += drop.speed;
        if (drop.y > canvas.height) {
            Object.assign(drop, createRaindrop());
        }
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    drawRaindrops();
    updateRaindrops();
    
    // 새로운 빗방울 추가
    if (raindrops.length < 100) {
        raindrops.push(createRaindrop());
    }
    
    requestAnimationFrame(animate);
}

// 초기 빗방울 생성
for (let i = 0; i < 100; i++) {
    raindrops.push(createRaindrop());
}

animate();

이 코드는 다음과 같은 일을 해요:

🔹 빗방울을 생성하는 createRaindrop() 함수를 정의해요.
🔹 빗방울을 그리는 drawRaindrops() 함수를 만들어요.
🔹 빗방울의 위치를 업데이트하는 updateRaindrops() 함수를 만들어요.
🔹 animate() 함수에서 이 모든 과정을 반복해요.
🔹 화면 밖으로 나간 빗방울은 다시 위에서 시작하도록 해요.

이렇게 하면 정말 비가 내리는 것 같은 애니메이션이 완성돼요! 창밖에 비 내리는 모습을 보는 것 같지 않나요? 🌧️

6.4 인터랙티브 애니메이션: 마우스를 따라다니는 원

마지막으로, 사용자의 입력에 반응하는 인터랙티브한 애니메이션을 만들어볼까요? 마우스를 따라다니는 원을 만들어봐요.

let mouseX = 0;
let mouseY = 0;
let targetX = 0;
let targetY = 0;

canvas.addEventListener('mousemove', (event) =>  {
    mouseX = event.clientX - canvas.offsetLeft;
    mouseY = event.clientY - canvas.offsetTop;
});

function drawCircle(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fillStyle = 'purple';
    ctx.fill();
    ctx.closePath();
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 원의 위치를 마우스 위치로 부드럽게 이동
    targetX += (mouseX - targetX) * 0.1;
    targetY += (mouseY - targetY) * 0.1;
    
    drawCircle(targetX, targetY);
    
    requestAnimationFrame(animate);
}

animate();

이 코드는 다음과 같은 일을 해요: