HTML.HTML5 캔버스 그래픽

🎨 HTML5 캔버스 그래픽: 웹에서 그림을 그리는 마법

안녕하세요! 정적인 이미지에서 벗어나, 직접 그림을 그리고 인터랙티브한 그래픽을 웹에서 구현해보고 싶으신가요?
오늘은 HTML5에서 강력하게 제공하는 <canvas> 태그와 자바스크립트를 활용해 웹에서 그림을 그리는 마법을 알려드릴게요!

---

📌 캔버스란 무엇인가?

<canvas>는 웹 브라우저 안에서 자바스크립트를 이용하여 2D 또는 3D 그래픽을 그릴 수 있는 HTML 요소입니다.
예전에는 플래시(Flash)나 자바 애플릿을 사용했지만, 이제는 HTML5 표준 기술만으로도 동적인 그래픽이 가능합니다.

<canvas id="myCanvas" width="400" height="300" style="border:1px solid black;">
  이 브라우저는 캔버스를 지원하지 않습니다.
</canvas>

Tip: 위 코드를 HTML 문서에 넣으면, 자바스크립트를 이용해 다양한 그래픽을 표현할 수 있는 도화지가 생겨요!

---

🎯 2D 컨텍스트 가져오기

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

이렇게 하면, 2D 그래픽을 그릴 수 있는 도구(context)를 가져올 수 있어요!

---

🖌️ 기본 도형 그리기 예제

1. 선(Line)

context.beginPath();
context.moveTo(50, 50);
context.lineTo(200, 100);
context.strokeStyle = "red";
context.lineWidth = 4;
context.stroke();

2. 사각형(Rectangle)

context.fillStyle = "skyblue";
context.fillRect(100, 150, 120, 80);

3. 원(Circle)

context.beginPath();
context.arc(200, 200, 40, 0, 2 * Math.PI);
context.fillStyle = "green";
context.fill();

---

🧠 텍스트 출력하기

context.font = "20px Arial";
context.fillStyle = "black";
context.fillText("Hello Canvas!", 50, 50);

🖼️ 이미지 출력하기

let img = new Image();
img.src = "image.jpg";
img.onload = function() {
    context.drawImage(img, 20, 20, 100, 100);
}

---

🖍️ 마우스로 자유롭게 그림 그리기

아래 코드는 간단한 웹 그림판 기능입니다.

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let painting = false;

canvas.addEventListener("mousedown", () => painting = true);
canvas.addEventListener("mouseup", () => painting = false);
canvas.addEventListener("mouseout", () => painting = false);
canvas.addEventListener("mousemove", draw);

function draw(e) {
  if (!painting) return;
  ctx.lineWidth = 3;
  ctx.lineCap = "round";
  ctx.strokeStyle = "#000";

  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
}

📌 팁: 사용자가 마우스를 움직이는 대로 선이 그려지는 방식입니다. 자유 그리기 구현에 유용해요!

---

✨ 마무리하며

<canvas>는 단순한 그림을 넘어, 게임 개발, 데이터 시각화, 인터랙티브 아트 등 다양한 분야에서 활용됩니다.
직접 따라 해보며 익숙해진다면, 정말 멋진 웹 애플리케이션도 만들 수 있답니다!

---