HTML5 캔버스에서 호의 시작 각도와 끝 각도란?
HTML5 캔버스에서 호(arc)를 그릴 때는 arc() 메서드를 사용하며, 이 메서드는 시작 각도(startAngle)와 끝 각도(endAngle)를 인자로 받아 원호의 시작점과 끝점을 결정합니다. 기본적인 함수 정의는 다음과 같습니다.
arc(x, y, radius, startAngle, endAngle, anticlockwise)arc() 메서드의 매개변수
- x, y : 원의 중심 좌표입니다.
- radius : 원의 반지름입니다.
- startAngle, endAngle : 호의 시작점과 끝점을 정의하는 각도로, 라디안(radian) 단위로 지정합니다. 두 각도 모두 수평축, 즉 x축을 기준으로 측정됩니다.
- anticlockwise : 불리언(Boolean) 값입니다. true이면 시계 반대 방향으로 호를 그리고, false이면 시계 방향으로 그립니다.
각도의 기준 이해하기
시작 각도와 끝 각도는 라디안 단위로 표현되며, 0 라디안은 원의 오른쪽(3시 방향)에 해당합니다. 예를 들어 완전한 원을 그리려면 시작 각도를 0으로, 끝 각도를 2π(Math.PI * 2)로 지정하면 됩니다. 반원을 그리고 싶다면 끝 각도를 π(Math.PI)로 설정할 수 있습니다.
간단한 사용 예제
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
// 중심(100, 100), 반지름 50, 0부터 π/2까지 시계 방향 호
ctx.arc(100, 100, 50, 0, Math.PI / 2, false);
ctx.stroke();위 예제처럼 각도 값을 조절하면 부분 원호, 반원, 전체 원 등 다양한 형태의 곡선을 자유롭게 그릴 수 있습니다.