10.1 Canvas 사용의 기초
Canvas API는 개발자들에게 웹 애플리케이션에서 2D 그래픽과 애니메이션을 만들기 위한 훌륭한 도구를 제공해. 이 강의에서는 Canvas API의 기본 작업, 요소 만들기, 그래픽 그리기 및 애니메이션 제작에 대해 다룰 거야.
<canvas> 요소 생성하기
HTML의 <canvas> 요소는 다양한 그래픽 작업을 수행할 수 있는 그리기 영역을 만드는 데 사용돼:
HTML
<canvas id="myCanvas" width="800" height="600"></canvas>
그리기 컨텍스트 얻기
<canvas> 요소에서 그리기 작업을 수행하려면 그리기 컨텍스트를 얻어야 해. 2D 그래픽에는 2d 컨텍스트가 사용돼:
JavaScript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
10.2 Canvas에서 그리기
1. 직사각형
Canvas API는 직사각형을 채우거나 테두리를 그리는 메서드를 제공해.
채워진 직사각형 — fillRect:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
직사각형 테두리 — strokeRect:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
</script>
</body>
</html>
영역 지우기
clearRect 메서드는 특정 영역을 지우는 데 사용돼:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
ctx.clearRect(0, 0, 800, 600);
</script>
</body>
</html>
2. 선
선을 그리기 위해 beginPath 메서드로 새로운 경로를 시작하고, moveTo와 lineTo 메서드로 선의 좌표를 정의해:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.lineTo(150, 300);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
3. 원과 호
arc 메서드는 원과 호를 그리는 데 사용돼:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(400, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
4. 텍스트
fillText와 strokeText 메서드는 텍스트를 그리는 데 사용돼:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 350);
</script>
</body>
</html>
5. 그라디언트
Canvas API는 선형 및 방사형 그라디언트를 생성하는 걸 지원해.
선형 그라디언트:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
</script>
</body>
</html>
방사형 그라디언트:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const radialGradient = ctx.createRadialGradient(400, 200, 20, 400, 200, 100);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'green');
ctx.fillStyle = radialGradient;
ctx.fillRect(300, 100, 200, 200);
</script>
</body>
</html>
6. 이미지
drawImage 메서드는 Canvas에 이미지를 그리는 데 사용돼:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg';
</script>
</body>
</html>
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'path/to/image-1.jpg';
</script>
</body>
</html>
10.3 Canvas에서 애니메이션
애니메이션을 만들기 위해 requestAnimationFrame 메서드를 사용해, 이 메서드는 주어진 함수를 호출하여 새 애니메이션 프레임을 그려.
1. 애니메이션의 기초
간단한 애니메이션 예제:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
2. 복잡한 애니메이션
원 애니메이션 예제:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animateCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.beginPath();
ctx.arc(centerX + Math.cos(angle) * 100, centerY + Math.sin(angle) * 100, radius, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
angle += 0.05;
requestAnimationFrame(animateCircle);
}
animateCircle();
</script>
</body>
</html>
3. 타이머 사용하기
애니메이션을 만들기 위해 setInterval과 setTimeout 메서드도 사용할 수 있어.
setInterval을 사용한 애니메이션 예제:
HTML
<html>
<head>
<title>문서</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
}
setInterval(draw, 30);
</script>
</body>
</html>
GO TO FULL VERSION