HTML - 캔버스: 웹 그래픽에 대한 초보자 가이드

안녕하세요, 미래의 웹 마법사 여러분! 오늘 우리는 HTML 캔버스의 세계에 흥미로운 여정을 떠납니다. 코드를 한 줄도 적어보지 않았다면 걱정 마세요 - 저는 친절한 안내자가 되어 이 주제를 단계별로 탐구해 나갈 것입니다. 그러면 가상의 붓을 들고, 디지털 마스터피스를 만들어 보겠습니다!

HTML 캔버스란?

들어가기 전에 HTML 캔버스가 무엇인지 이해해 보겠습니다. 상상해 보세요, 원하는 것을 그릴 수 있는 흰색 종이 한 장이 있다면 - 캔버스는 디지털 세계에서 바로 그것입니다. 그것은 그래픽을 그리거나, 애니메이션을 만들거나, 심지어 JavaScript를 사용하여 게임을 개발할 수 있는 HTML 엘리먼트입니다.

예제

간단한 예제로 시작해 보겠습니다:

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

이 코드는 웹 페이지에 캔버스 엘리먼트를 생성합니다. 마치 캔버스를 놓고 그림을 그리기 전의 마음가짐과 같습니다!

렌더링 컨텍스트

이제 우리는 캔버스가 있으니, 그 위에 그림을 그려야 합니다. 여기서 렌더링 컨텍스트가 등장합니다. 이를 마치 그림 도구 세트라고 생각해 보세요. JavaScript를 사용하여 이 컨텍스트를 얻습니다:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

여기서 우리는 캔버스를 잡아서 2D 그리기 도구 세트를 요청합니다. 마치 펜과 팔레트를 집는 것과 같습니다!

브라우저 지원

계속하기 전에 브라우저 지원에 대해 간단히 언급하겠습니다. 대부분의 최신 브라우저는 캔버스를 지원하지만, 항상 확인하는 것이 좋습니다. 다음과 같은 방법으로 지원 여부를检测할 수 있습니다:

if (canvas.getContext) {
// 캔버스가 지원됩니다.
} else {
// 캔버스가 지원되지 않습니다.
}

이 코드는 "브라우저야, 이 멋진 캔버스 기능을 처리할 수 있니?"라고 묻는 것과 같습니다. 그가 예라고 답하면, 우리는 시작할 수 있습니다!

HTML 캔버스 - 사각형 그리기

간단한 것으로 시작해 보겠습니다 - 사각형을 그리는 것. 캔버스에는 세 가지 메서드가 있습니다:

메서드	설명
fillRect(x, y, width, height)	채워진 사각형을 그립니다
strokeRect(x, y, width, height)	사각형 테두리를 그립니다
clearRect(x, y, width, height)	지정된 사각형 영역을 지웁니다

다음은 예제입니다:

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.strokeStyle = "blue";
ctx.strokeRect(70, 10, 50, 50);

ctx.clearRect(30, 30, 30, 30);

이 코드는 빨간색 채워진 정사각형, 파란색 테두리 정사각형, 그리고 빨간색 정사각형의 일부를 지웁니다. 마치 크레용으로 그린 다음 지우개로 지우는 것과 같습니다!

HTML 캔버스 - 경로 그리기

이제 경로를 통해 좀 더 창의적으로 그려 보겠습니다. 경로는 연결된 점의 퍼즐과 같습니다. 다음과 같이 합니다:

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

이 코드는 삼각형을 만듭니다. (50, 50)에서 시작하여 (200, 50), (200, 200)를 거쳐 마무리합니다. 마치 "펜을 떼지 말자"라는 그림遊戲를 하는 것과 같습니다!

HTML 캔버스 - 선 그리기

선 그리기는 경로와 비슷하지만 더 간단합니다. 예제를 보겠습니다:

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

이 코드는 왼쪽 상단 모서리에서 오른쪽 중앙으로 이어지는 대각선을 그립니다. 마치 두 점을 연결하는 것과 같습니다!

HTML 캔버스 - 베지어 곡선 그리기

이제 우리 레퍼토리에 곡선을 추가해 보겠습니다. 베지어 곡선은 그림 세계의 예술적인 필체와 같습니다:

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

이 코드는 (20, 20)에서 시작하여 (20, 100)과 (200, 100)를 통제점으로 (200, 20)에서 끝나는 곡선을 만듭니다. 마치 미소를 그리는 것과 같습니다!

HTML 캔버스 - 이차 곡선 그리기

이차 곡선은 베지어 곡선의 간단한 사촌입니다:

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(100, 100, 180, 20);
ctx.stroke();

이 코드는 (20, 20)에서 시작하여 (180, 20)로 이어지는 곡선을 만들며, (100, 100)를 통제점으로 합니다. 아치를 그리는 데 완벽합니다!

HTML 캔버스 - 이미지 사용

캔버스는 그리기 외에도 이미지를 다룰 수 있습니다:

var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10);
};
img.src = 'myImage.png';

이 코드는 이미지를 로드하고 캔버스에 그을 수 있습니다. 마치 디지털 스티커를 붙이는 것과 같습니다!

HTML 캔버스 - 그라디언트 생성

그라디언트를 사용하여 색상을 더해 보겠습니다:

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

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

이 코드는 빨간색에서 파란색으로 이어지는 그라디언트를 만들고, 이를 사용하여 사각형을 채웁니다. 마치 디지털 일몰을 만드는 것과 같습니다!

HTML 캔버스 - 스타일과 색상

캔버스는 그림을 스타일링하는 다양한 방법을 제공합니다:

ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 5;

ctx.fillRect(25, 25, 100, 100);
ctx.strokeRect(25, 25, 100, 100);

이 코드는 노란색 채워진 사각형과 두껍게 그린 파란색 테두리 사각형을 만듭니다. 마치 선을 그리는 것과 같지만, 우리가 선을 선택할 수 있습니다!

HTML 캔버스 - 텍스트와 글꼴

캔버스에 텍스트를 추가할 수 있습니다:

ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 10, 50);

이 코드는 "Hello, Canvas!"를 30px Arial 글꼴로 써냅니다. 마치 디지털 작품에 캡션을 추가하는 것과 같습니다!

HTML 캔버스 - 패턴과 그림자

패턴과 그림자를 사용하여 깊이를 더해 보겠습니다:

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

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);

이 코드는 패턴 배경을 만들고 그 위에 그림자가 있는 파란색 사각형을 그립니다. 마치 디지털 그림에 질감과 깊이를 추가하는 것과 같습니다!

HTML 캔버스 - 상태 저장과 복원

캔버스는 그리기 상태를 저장하고 복원할 수 있습니다:

ctx.fillStyle = "blue";
ctx.save();

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.restore();
ctx.fillRect(70, 10, 50, 50);

이 코드는 빨간색 사각형을 그린 다음 파란색 사각형을 그립니다. 마치 디지털 예술에서 여러 층을 사용하는 것과 같습니다!

HTML 캔버스 - 이동

우리는 그리기 원점을 이동할 수 있습니다:

ctx.translate(100, 50);
ctx.fillRect(0, 0, 50, 50);

이 코드는 그리기 원점을 이동하고 그 후 사각형을 그립니다. 마치 종이를 움직여서 그리는 것과 같습니다!

HTML 캔버스 - 회전

그림에 회전을 추가해 보겠습니다:

ctx.rotate(Math.PI / 4);
ctx.fillRect(50, -25, 100, 50);

이 코드는 캔버스를 회전시키고 사각형을 그립니다. 마치 종이를 각도로 돌린 다음 그리는 것과 같습니다!

HTML 캔버스 - 확대

우리는 그림의 크기를 변경할 수 있습니다:

ctx.scale(2, 2);
ctx.fillRect(25, 25, 50, 50);

이 코드는 모든 그림의 크기를 두 배로 합니다. 마치 확대경을 사용하는 것과 같습니다!

HTML 캔버스 - 변환

변환을 통해 더 복잡한 조작을 할 수 있습니다:

ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillRect(0, 0, 50, 50);

이 코드는 복잡한 변환을 적용한 후 사각형을 그립니다. 마치 현실을 구부리는 것과 같습니다!

HTML 캔버스 - 병합

새로운 그림이 기존 그림과 어떻게 상호작용하는지 조정할 수 있습니다:

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

ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

이 코드는 파란색 사각형을 그린 다음 그 위에 빨간색 사각형을 그립니다. 마치 다층의 페인트를 바르는 것과 같습니다!

HTML 캔버스 - 애니메이션

마지막으로, 캔버스를 생동시키는 애니메이션을 추가해 보겠습니다:

var x = 0;

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 0, 50, 50);
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate);
}

animate();

이 코드는 캔버스에 이동하는 사각형을 만듭니다. 마치 자신의 작은 영화를 만드는 것과 같습니다!

그렇게 HTML 캔버스에 대한 바람骤旅行이 끝났습니다! 캔버스를 완벽하게 마스터하려면 연습이 중요합니다. 따라서 실험하고, 놀아보고, 가장 중요한 것은 즐거워하세요! 미래의 디지털 피카소가 될 수 있을지도 모릅니다. 행복한 코딩, 미래의 그림사들!

Credits: Image by storyset