HTML Canvas 원 그리기
HTML Canvas에서 원이나 호를 그리기 위해서는 arc() 메서드를 사용한다. 이 문서에서는 다양한 원과 호를 그리는 방법을 설명한다.
arc() 메서드 이해하기
원이나 호를 그리려면 다음과 같은 단계를 따른다.
- beginPath() 메서드로 경로를 시작한다
- arc() 메서드로 원이나 호를 정의한다
- stroke() 메서드로 테두리를 그리거나 fill() 메서드로 내부를 채운다
arc() 메서드의 문법은 다음과 같다.
context.arc(x, y, r, startAngle, endAngle, counterclockwise);| 매개변수 | 설명 |
|---|---|
| x, y | 원의 중심 좌표 |
| r | 원의 반지름 |
| startAngle | 호의 시작 각도(라디안) |
| endAngle | 호의 종료 각도(라디안) |
| counterclockwise | 그리는 방향(선택 사항, false: 시계 방향, true: 반시계 방향) |
💡 각도 단위:
• arc() 메서드에서 각도는 라디안 단위로 지정한다
• 각도(도)를 라디안으로 변환: 라디안 = (각도 × Math.PI) / 180
• 일반적인 값: 0 = 0°, Math.PI = 180°, Math.PI * 2 = 360°
기본 원 그리기
다음 예제는 HTML Canvas에 테두리만 있는 기본 원을 그린다.
<canvas id="myCanvas1" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>이 코드는 캔버스의 중앙(150,75)에 반지름 50픽셀인 원을 그린다. 시작 각도는 0라디안이고 종료 각도는 2π 라디안(360°)으로 완전한 원을 그린다.
채워진 원 그리기
다음 예제는 내부가 채워진 원을 그린다.
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
</script>fill() 메서드는 경로 내부를 채운다. fillStyle 속성으로 채우기 색상을 설정할 수 있다.
테두리와 채우기가 모두 있는 원
테두리와 채우기를 모두 적용한 원을 그릴 수도 있다.
<canvas id="myCanvas3" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "green";
ctx.fill();
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.stroke();
</script>이 예제는 녹색으로 채워지고 파란색 테두리(두께 5픽셀)를 가진 원을 그린다.
반원 그리기
arc() 메서드의 시작 각도와 종료 각도를 조정하여 반원을 그릴 수 있다.
<canvas id="myCanvas4" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas4");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(150, 75, 50, 0, Math.PI);
ctx.stroke();
</script>이 예제는 종료 각도를 Math.PI(180°)로 설정하여 아래쪽 반원을 그린다.
호(Arc) 그리기
특정 시작 각도와 종료 각도를 설정하여 호를 그릴 수 있다.
<canvas id="myCanvas5" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas5");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(150, 75, 50, Math.PI / 4, Math.PI * 3 / 4);
ctx.strokeStyle = "purple";
ctx.lineWidth = 8;
ctx.stroke();
</script>이 예제는 45°(π/4)에서 시작하여 135°(3π/4)에서 끝나는 호를 그린다.
원 그리기 방향 설정
arc() 메서드의 마지막 매개변수를 사용하여 그리는 방향을 설정할 수 있다.
<canvas id="myCanvas6" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas6");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(150, 75, 50, 0, 1.5 * Math.PI, false);
ctx.strokeStyle = "red";
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 75, 30, 0, 1.5 * Math.PI, true);
ctx.strokeStyle = "blue";
ctx.stroke();
</script>이 예제는 같은 시작 각도와 종료 각도를 가진 두 개의 호를 그리지만, 하나는 시계 방향(false)으로, 다른 하나는 반시계 방향(true)으로 그린다.
여러 개의 원 그리기
여러 개의 원을 그려 패턴을 만들 수 있다.
<canvas id="myCanvas7" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas7");
var ctx = c.getContext("2d");
var colors = ["red", "orange", "yellow", "green", "blue"];
for (var i = 0; i < 5; i++) {
ctx.beginPath();
ctx.arc(60 + i * 45, 75, 20, 0, 2 * Math.PI);
ctx.fillStyle = colors[i];
ctx.fill();
}
</script>[/code]
이 예제는 서로 다른 위치와 색상을 가진 5개의 원을 그린다.
동심원 그리기
같은 중심을 가진 여러 원을 그릴 수 있다.
[code lang="markup"]<canvas id="myCanvas8" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas8");
var ctx = c.getContext("2d");
for (var i = 0; i < 5; i++) {
ctx.beginPath();
ctx.arc(150, 75, 50 - i * 10, 0, 2 * Math.PI);
ctx.strokeStyle = "rgba(0, 0, 0, " + (i + 1) * 0.2 + ")";
ctx.stroke();
}
</script>[/code]
이 예제는 반지름이 다른 5개의 동심원을 그리고, 안쪽 원일수록 더 진한 테두리를 가지도록 한다.
복합 도형: 간단한 얼굴 그리기
원을 조합하여 더 복잡한 도형을 만들 수 있다.
[code lang="markup"]<canvas id="myCanvas9" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas9");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "yellow";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();
ctx.beginPath();
ctx.arc(125, 65, 10, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();
ctx.beginPath();
ctx.arc(175, 65, 10, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(150, 90, 30, 0, Math.PI);
ctx.stroke();
</script>이 예제는 원을 조합하여 간단한 미소 짓는 얼굴을 그린다.
그라데이션이 있는 원
그라데이션을 사용하여 더 복잡한 색상 효과를 만들 수 있다.
<canvas id="myCanvas10" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas10");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(150, 75, 10, 150, 75, 70);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "blue");
ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
</script>이 예제는 중심이 흰색이고 가장자리가 파란색인 방사형 그라데이션으로 채워진 원을 그린다.
💡 원 그리기 팁:
• 원 내부를 채우려면 fill() 메서드를, 테두리만 그리려면 stroke() 메서드를 사용한다
• 각도는 캔버스에서 3시 방향(0°)에서 시작하여 시계 방향으로 측정된다
• 시계/반시계 방향 매개변수는 호를 그릴 때 중요하지만 완전한 원에서는 영향을 주지 않는다
HTML Canvas에서 원과 호를 그리는 방법을 배웠다. 이러한 기본 도형을 조합하면 더 복잡하고 흥미로운 그래픽을 만들 수 있다.
