HTML5 arc() 메서드란?
HTML5의 <canvas> 요소와 함께 arc() 메서드를 사용하면 손쉽게 원을 그릴 수 있습니다. 핵심 원리는 간단합니다. 시작 각도를 0으로, 끝 각도를 2*Math.PI(360도)로 지정하면 전체 원이 완성됩니다.
라디안(radian) 단위에서 2π(약 6.283)는 원 한 바퀴 전체를 의미하므로, 이 범위만큼 호(arc)를 그리면 자연스럽게 완전한 원이 되는 것입니다.
arc() 메서드의 매개변수
arc() 메서드는 다음과 같은 여섯 개의 매개변수를 받습니다.
| 번호 | 매개변수 | 설명 |
| 1 | x | 원의 중심 x좌표 |
| 2 | y | 원의 중심 y좌표 |
| 3 | r | 원의 반지름 |
| 4 | startingAngle | 시작 각도 (라디안 단위) |
| 5 | endingAngle | 끝 각도 (라디안 단위) |
| 6 | counterclockwise (True/False) | 반시계 방향으로 그리려면 True, 시계 방향이면 False (생략 가능) |
예제 코드
아래 예제를 실행하면 HTML5 캔버스에 arc() 메서드로 원을 그릴 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas</title>
</head>
<body>
<canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
ctxt.beginPath();
ctxt.arc(100,75,50,0,2*Math.PI);
ctxt.stroke();
</script>
</body>
</html>코드 동작 방식 살펴보기
예제 코드의 핵심 흐름은 다음과 같습니다.
1. 캔버스 컨텍스트 가져오기: getContext("2d")를 호출하여 2D 드로잉 컨텍스트를 얻습니다. 모든 그리기 작업은 이 컨텍스트 객체를 통해 수행됩니다.
2. 새 경로 시작: beginPath()를 호출해 새로운 경로를 시작합니다. 이전에 그린 도형과 분리하기 위해 반드시 필요한 단계입니다.
3. 원 정의: arc(100, 75, 50, 0, 2*Math.PI)는 좌표 (100, 75)를 중심으로 하고, 반지름이 50픽셀이며, 0부터 2π까지의 호를 그립니다. 즉, 완전한 원 하나입니다.
4. 화면에 렌더링: stroke()를 호출하면 정의된 경로가 실제로 캔버스에 선으로 그려집니다. 내부를 채우고 싶다면 stroke() 대신 또는 함께 fill()을 사용하면 됩니다.
이처럼 arc() 메서드는 시작 각도와 끝 각도만 조절하면 부분 호부터 완전한 원까지 자유롭게 표현할 수 있어, 차트나 게임 그래픽 등 다양한 웹 그래픽 작업에 활용됩니다.