728x90
HTML <canvas> 태그란?
<canvas> 태그는 JavaScript를 사용하여 그래픽을 그릴 수 있는 영역을 제공하는 HTML 요소입니다. 이를 활용하여 도형, 이미지, 애니메이션, 게임 그래픽 등을 직접 화면에 그릴 수 있습니다.
주요 특징
- <canvas> 태그 자체는 아무런 그래픽을 제공하지 않으며, JavaScript를 사용해 그림을 그려야 함.
- 2D 그래픽 (CanvasRenderingContext2D) 또는 3D 그래픽 (WebGLRenderingContext)을 지원.
- 벡터 그래픽이 아니라 비트맵 기반 → 확대하면 픽셀이 깨질 수 있음.
- HTML 문서에 내장되며, CSS를 사용하여 크기 조절 가능.
기본 사용법
<canvas id="myCanvas" width="300" height="150" style="border:1px solid black;"></canvas>출력 결과:
테두리가 있는 300x150 크기의 캔버스가 표시됩니다. (아직 아무것도 그려지지 않음)
<canvas> 태그 속성
| 속성 | 설명 |
| width | 캔버스의 너비 (픽셀 단위) |
| height | 캔버스의 높이 (픽셀 단위) |
| id | JavaScript에서 캔버스를 선택할 때 사용 |
| style | CSS를 사용하여 크기 및 스타일 지정 가능 |
※ width, height 속성을 CSS가 아니라 HTML 속성으로 설정해야 합니다. CSS로 크기를 조정하면 비율이 깨질 수 있습니다.
Javascript로 캔버스에 그림 그리기
💡사각형 그리기
예제 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
// 캔버스 요소 가져오기
var canvas = document.getElementById("myCanvas");
// 2D 컨텍스트 가져오기
var ctx = canvas.getContext("2d");
// 사각형 그리기
ctx.fillStyle = "blue"; // 색상 설정
ctx.fillRect(50, 50, 100, 50); // (x, y, width, height)
});
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid black;"></canvas>
</body>
</html>출력 결과:
※ 파란색으로 채워진 사각형을 그립니다.
💡선 그리기
예제 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
// 캔버스 요소 가져오기
var canvas = document.getElementById("myCanvas");
// 2D 컨텍스트 가져오기
var ctx = canvas.getContext("2d");
ctx.beginPath(); // 새로운 경로 시작
ctx.moveTo(50, 50); // 시작점
ctx.lineTo(200, 50); // 끝점
ctx.strokeStyle = "black"; // 선 색상
ctx.lineWidth = 3; // 선 두께
ctx.stroke(); // 선 그리기
});
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid black;"></canvas>
</body>
</html>출력 결과:
※ 검은색 선을 그립니다.
💡원 그리기
예제 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
// 캔버스 요소 가져오기
var canvas = document.getElementById("myCanvas");
// 2D 컨텍스트 가져오기
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 40, 0, 2 * Math.PI); // (x, y, 반지름, 시작 각도, 끝 각도)
ctx.fillStyle = "green"; // 채우기 색상
ctx.fill(); // 원을 그림
ctx.stroke(); // 테두리 그림
});
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid black;"></canvas>
</body>
</html>출력 결과:
※ 녹색 원을 그립니다.
💡텍스트 그리기
예제 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
// 캔버스 요소 가져오기
var canvas = document.getElementById("myCanvas");
// 2D 컨텍스트 가져오기
var ctx = canvas.getContext("2d");
ctx.font = "20px Arial"; // 글꼴 설정
ctx.fillStyle = "black"; // 글자 색상
ctx.fillText("Hello, Canvas!", 50, 100); // (텍스트, x, y)
});
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid black;"></canvas>
</body>
</html>출력 결과:
※ 캔버스에 "Hello, Canvas!" 텍스트 출력
💡이미지 삽입
예제 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementById("imageCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("myImage");
img.onload = function() {
ctx.drawImage(img, 50, 50, 100, 100); // (이미지, x, y, width, height)
};
});
</script>
</head>
<body>
<canvas id="imageCanvas" width="300" height="200"></canvas>
<img id="myImage" src="./icon.png" style="display:none;">
</body>
</html>출력 결과:
※ 캔버스에 이미지를 표시할 수 있습니다.
💡애니메이션 만들기
예제 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementById("animationCanvas");
var ctx = canvas.getContext("2d");
var x = 10; // 공의 초기 위치
var speed = 4; // 이동 속도
function drawBall() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스 초기화
ctx.beginPath();
ctx.arc(x, 75, 10, 0, Math.PI * 2); // 공 그리기
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
x += speed; // 공 이동
if (x > canvas.width || x < 0) { // 벽에 부딪히면 방향 변경
speed = -speed;
}
requestAnimationFrame(drawBall); // 애니메이션 프레임 갱신
}
drawBall(); // 애니메이션 시작
});
</script>
</head>
<body>
<canvas id="animationCanvas" width="300" height="150"></canvas>
</body>
</html>출력 결과:
※ 공이 좌우로 움직이는 애니메이션 생성
<canvas> 태그와 <svg> 태그의 차이점
| 비교 | <canvas> | <svg> |
| 그래픽 방식 | 비트맵 기반 (Raster) | 벡터 기반 (Vector) |
| 해상도 | 확대 시 품질 저하 | 확대해도 선명 |
| 사용법 | JavaScript 코드 필요 | XML 기반 (HTML 태그처럼 사용 가능) |
| 속도 | 빠름 (게임, 애니메이션에 적합) | 느림 (복잡한 그래픽에 부적합) |
- 간단한 UI 아이콘이나 차트 → <svg>
- 게임, 실시간 애니메이션 → <canvas>
728x90
'프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] strong 태그 - 검색엔진 최적화(SEO) 태그 (30) | 2025.02.10 |
|---|---|
| [HTML] button 태그 (115) | 2025.02.07 |
| [HTML] br 태그 (줄바꿈) (68) | 2025.02.07 |
| [HTML] body 태그 (92) | 2025.02.07 |
| [HTML] blockquote 태그 (긴 인용문) (156) | 2025.02.06 |