HTML5 Canvas를 활용한 그래픽 디자인 기초 🎨

작성: 2025년 04월 25일읽기: 약 3분

웹 개발에 관심이 많은 주니어 개발자 여러분, HTML5 Canvas를 통해 멋진 그래픽 디자인을 만들어보는 시간을 가져보겠습니다. 복잡하고 어려운 기술 용어는 날려버리고, 쉽고 재미있게 Canvas의 세계로 빠져보아요!

Canvas는 웹 페이지에 그래픽을 그리기 위한 HTML 요소입니다. 이를 활용하면, 웹 페이지에 동적인 그림이나 애니메이션을 쉽게 추가할 수 있어요. 시작해볼까요?

기본 도형 그리기

먼저, HTML5 Canvas에서 가장 기본이 되는 도형을 그려보겠습니다. 아래는 HTML 페이지에 Canvas를 추가하고, JavaScript를 사용하여 사각형을 그리는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
</script>

</body>
</html>

이 코드는 150x100 크기의 빨간색 사각형을 그립니다. fillRect(x, y, width, height) 메소드는 캔버스에 사각형을 그리는 데 사용됩니다. 여기서 x와 y는 사각형의 시작 위치를 나타내며, width와 height는 각각 너비와 높이입니다.

원 그리기

다음으로, 원을 그려보겠습니다. 원을 그리기 위해서는 arc(x, y, radius, startAngle, endAngle) 메소드를 사용합니다.

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

이 코드는 중심이 (95, 50)이고 반지름이 40인 원을 그립니다. beginPath() 메소드로 새로운 경로를 시작하고, arc() 메소드로 원을 그린 후, stroke() 메소드로 원을 화면에 나타냅니다.

텍스트 추가하기

마지막으로, Canvas에 텍스트를 추가해보겠습니다. 텍스트를 추가하는 것은 웹 페이지에 개성을 더하고 정보를 전달하는 데 매우 유용합니다.

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 10, 50);
</script>

font 속성을 사용하여 텍스트의 스타일과 크기를 설정할 수 있으며, fillText(text, x, y) 메소드로 텍스트를 캔버스에 그립니다.

여기까지 HTML5 Canvas의 기초를 다뤄보았습니다. 이 예제들을 바탕으로 여러분만의 창의적인 그래픽 디자인을 만들어보세요. 실험을 통해 배우는 것이 가장 좋은 방법입니다. 즐거운 코딩 되세요! 🚀