HTML5 캔버스(Canvas)
캔버스 요소: <canvas>
HTML5의 캔버스 요소는 비트맵 이미지나 그래픽을 직접 그릴 수 있는 HTML 태그입니다. 캔버스를 이용하면 웹 페이지에서 동적인 그래픽 콘텐츠를 구현할 수 있습니다.
예제: 캔버스 요소 기본 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>캔버스 요소 기본 설정</title>
</head>
<body>
<h1>기본 캔버스</h1>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
</body>
</html>
2D 그리기 컨텍스트 설정(Setting up 2D Drawing Context)
캔버스 요소에서 2D 그래픽을 그리려면 getContext('2d') 메서드를 사용하여 2D 그리기 컨텍스트를 가져와야 합니다.
예제: 2D 그리기 컨텍스트 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2D 그리기 컨텍스트 설정</title>
</head>
<body>
<h1>2D 그리기 컨텍스트 설정</h1>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
</script>
</body>
</html>
기본 도형 그리기(Drawing Basic Shapes): 사각형, 원, 선(Rectangle, Circle, Line)
HTML5 캔버스를 사용하여 다양한 기본 도형을 그릴 수 있습니다.
예제: 사각형 그리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>사각형 그리기</title>
</head>
<body>
<h1>사각형 그리기</h1>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 150, 100);
</script>
</body>
</html>
예제: 원 그리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원 그리기</title>
</head>
<body>
<h1>원 그리기</h1>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#0000FF";
ctx.fill();
</script>
</body>
</html>
예제: 선 그리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선 그리기</title>
</head>
<body>
<h1>선 그리기</h1>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.moveTo(50, 50);
ctx.lineTo(300, 300);
ctx.stroke();
</script>
</body>
</html>
텍스트와 이미지 그리기(Drawing Text and Images)
캔버스에서 텍스트와 이미지를 그리는 방법도 매우 간단합니다.
예제: 텍스트 그리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 그리기</title>
</head>
<body>
<h1>텍스트 그리기</h1>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 50, 100);
</script>
</body>
</html>
예제: 이미지 그리기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지 그리기</title>
</head>
<body>
<h1>이미지 그리기</h1>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = function() {
ctx.drawImage(img, 50, 50);
}
img.src = 'path_to_image.jpg'; // 실제 이미지 경로로 대체
</script>
</body>
</html>
애니메이션 구현(Implementing Animation)
HTML5 캔버스는 애니메이션을 구현하기 위한 강력한 도구입니다. requestAnimationFrame 메서드를 사용하여 부드럽고 효율적인 애니메이션을 만들 수 있습니다.
예제: 간단한 애니메이션
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>애니메이션 구현</title>
</head>
<body>
<h1>애니메이션 구현</h1>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
let x = 0;
let y = 200;
let dx = 2;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 이전 프레임 지우기
ctx.beginPath();
ctx.arc(x, y, 20, 0, 2 * Math.PI);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
x += dx;
if(x > canvas.width || x < 0) {
dx = -dx; // 방향 변경
}
requestAnimationFrame(draw);
}
draw(); // 애니메이션 시작
</script>
</body>
</html>
HTML5 캔버스는 웹 페이지에서 그래픽과 애니메이션을 구현하는 데 매우 유용한 도구입니다. 다양한 도형, 텍스트, 이미지 등을 그릴 수 있으며, requestAnimationFrame을 통해 부드러운 애니메이션을 쉽게 구현할 수 있습니다.