HTML5 Canvas 완전 정복 - 웹에서 그래픽 그리기 🎨
안녕하세요! 오늘은 HTML5의 강력한 기능 중 하나인 Canvas에 대해 자세히 알아보겠습니다. Canvas를 이용하면 플러그인 없이도 웹 페이지에서 자유롭게 그래픽을 그릴 수 있어요!
🌟 HTML5 Canvas란?
HTML5 이전에는 웹 페이지에 그래픽을 표현하려면:
- 사진이나 그림: <img> 태그 사용
- 동적 그래픽: 자바 애플릿이나 플래시 등 플러그인 필요
하지만 HTML5에서는 Canvas가 도입되어:
- ✅ 플러그인 없이 자바스크립트로 그래픽 생성
- ✅ 모바일과 PC 모든 HTML5 브라우저에서 작동
- ✅ 선, 원, 사각형, 곡선, 이미지, 텍스트 등 다양한 그래픽 기능
- ✅ 실시간 그래프, 애니메이션, 게임, 지도 등 활용 가능
📝 Canvas 기본 사용법
1. Canvas 생성하기
<canvas id="myCanvas" width="300" height="150">
<p>canvas가 지원되지 않네요. 죄송합니다.</p>
</canvas>
2. JavaScript로 Canvas 조작하기
// 1단계: Canvas 요소 찾기
var canvas = document.getElementById("myCanvas");
// 2단계: 2D 컨텍스트 얻기 (그리기 도구)
var context = canvas.getContext("2d");
// 3단계: 그리기 작업 수행
context.rect(60, 60, 50, 50);
context.strokeStyle = "blue";
context.stroke();
🎯 Canvas 좌표계
Canvas는 픽셀 단위의 좌표계를 사용합니다:
- 원점 (0,0)은 왼쪽 상단
- X축: 오른쪽으로 증가
- Y축: 아래쪽으로 증가
🔷 도형 그리기
Canvas에서 도형을 그리는 과정:
- 경로(Path) 만들기 - 그릴 도형들을 준비
- 캔버스에 그리기 - 준비된 도형들을 실제로 출력
기본적인 그리기 순서
context.beginPath(); // 새로운 빈 경로 만들기
context.moveTo(120, 20); // 시작점 설정
context.lineTo(20, 50); // 직선 추가
context.stroke(); // 캔버스에 그리기
📐 다양한 도형 그리기
직선 그리기
context.beginPath();
context.moveTo(120, 20); // 시작점
context.lineTo(20, 50); // 끝점
context.lineTo(150, 120); // 다음 점
context.strokeStyle = "magenta";
context.stroke();
사각형 그리기
// 방법 1: 경로에 추가 후 그리기
context.beginPath();
context.rect(10, 10, 100, 100); // x, y, width, height
context.stroke();
// 방법 2: 바로 그리기
context.strokeRect(10, 10, 100, 100);
원호(Arc) 그리기
context.beginPath();
context.arc(100, 70, 30, 0, 1.5*Math.PI, false);
// arc(중심x, 중심y, 반지름, 시작각도, 끝각도, 반시계방향여부)
context.stroke();
각도 참고:
- 0도: 3시 방향
- π/2 (90도): 6시 방향
- π (180도): 9시 방향
- 3π/2 (270도): 12시 방향
🎨 도형 꾸미기
선 스타일 설정
context.strokeStyle = "blue"; // 선 색상
context.lineWidth = 10; // 선 굵기
context.fillStyle = "red"; // 채우기 색상
도형 내부 칠하기
// 사각형 칠하기
context.fillStyle = "violet";
context.fillRect(20, 20, 100, 100);
// 경로의 도형 칠하기
context.beginPath();
context.rect(20, 20, 100, 100);
context.fillStyle = "violet";
context.fill(); // 내부 칠하기
context.stroke(); // 외곽선 그리기
✏️ 텍스트 그리기
기본 텍스트 출력
// 폰트 설정
context.font = "50px Arial";
// 외곽선만 그리기
context.strokeStyle = "blue";
context.strokeText("Hello Canvas", 30, 100);
// 내부 채워서 그리기
context.fillStyle = "green";
context.fillText("Hello Canvas", 30, 200);
// 정렬 설정
context.textAlign = "center"; // left, center, right
🖼️ 이미지 그리기
이미지 로드 및 출력
var img = new Image();
img.onload = function() {
// 원본 크기로 그리기
context.drawImage(img, 20, 20);
// 크기 지정해서 그리기
context.drawImage(img, 20, 20, 100, 200);
// 캔버스에 꽉 차게 그리기
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = "image.jpg";
🖱️ 마우스로 그림 그리기
실제로 사용자가 마우스로 그림을 그릴 수 있는 기능도 구현할 수 있습니다:
var dragging = false;
var startX = 0, startY = 0;
// 마우스 이벤트 리스너 등록
canvas.addEventListener("mousedown", function(e) {
startX = e.offsetX;
startY = e.offsetY;
dragging = true;
});
canvas.addEventListener("mousemove", function(e) {
if (!dragging) return;
var curX = e.offsetX;
var curY = e.offsetY;
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(curX, curY);
context.stroke();
startX = curX;
startY = curY;
});
canvas.addEventListener("mouseup", function(e) {
dragging = false;
});
🧹 Canvas 지우기
// 전체 캔버스 지우기
context.clearRect(0, 0, canvas.width, canvas.height);
// 경로도 함께 지우기
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
💡 실습 예제
간단한 그림 그리기 예제
<!DOCTYPE html>
<html>
<head>
<title>Canvas 실습</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"
style="border: 1px solid #000;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 파란색 사각형
context.fillStyle = "blue";
context.fillRect(50, 50, 100, 80);
// 빨간색 원
context.beginPath();
context.arc(250, 100, 40, 0, 2*Math.PI);
context.fillStyle = "red";
context.fill();
// 텍스트
context.font = "20px Arial";
context.fillStyle = "green";
context.fillText("Hello Canvas!", 150, 200);
</script>
</body>
</html>
🚀 Canvas의 활용 분야
- 데이터 시각화: 실시간 차트, 그래프
- 게임 개발: 2D 게임, 애니메이션
- 이미지 편집: 필터, 효과 적용
- 디지털 아트: 온라인 그림판, 드로잉 앱
- 지도 서비스: 커스텀 지도, 경로 표시
📚 마무리
HTML5 Canvas는 웹에서 강력한 그래픽 기능을 제공하는 훌륭한 도구입니다. 기본적인 도형 그리기부터 복잡한 애니메이션까지 모든 것이 가능하죠!
핵심 포인트 정리:
- Canvas는 HTML5의 그래픽 API
- JavaScript로 제어하며 2D 컨텍스트 사용
- 경로(Path) 개념이 중요
- 다양한 도형, 텍스트, 이미지 그리기 가능
- 마우스 이벤트와 연동하여 인터랙티브한 기능 구현 가능
여러분도 Canvas를 활용해서 멋진 웹 애플리케이션을 만들어보세요! 🎯
728x90
반응형
'개발 공부 > HTML' 카테고리의 다른 글
| 📘 13강 – 웹에서 텍스트 붙여넣기 (2) | 2025.06.09 |
|---|---|
| 📘 12강 – 웹 스토리지와 쿠키 (0) | 2025.06.09 |
| 📘 10강 – BOM (브라우저 객체 모델) (1) | 2025.06.09 |
| 📘 9강 – 이벤트 처리 (0) | 2025.06.09 |
| 📘 8강 – HTML DOM (0) | 2025.06.09 |