HTML5 Canvas_html5 튜토리얼 기술에서 경로를 사용하여 호 그리기

이 기사는 Steve Fulton 및 Jeff Fulton HTML5 Canvas, 2장, "고급 경로 방법, Arcs"에서 번역되었습니다.

캔버스 드로잉에서 '호'는 완전한 원일 수도 있고 원주의 일부일 수도 있습니다.

예를 들어 점 (100, 100)을 중심으로 하고 반지름이 20인 원을 그리려면 다음 코드를 사용하면 됩니다.

위 코드에서 시작 각도(0)와 끝 각도(360)를 (Math.PI/180)을 곱하여 극좌표 라디안으로 변환해야 한다는 점에 주목할 필요가 있습니다. 시작 각도가 0이고 끝 각도가 360이면 완전한 원이 됩니다.

완전한 원 외에도 호 세그먼트를 그릴 수도 있습니다. 다음 코드는 원의 1/4을 그립니다.

위 호 외에 원의 4분의 3을 더 그리려면 시계 반대 방향을 참으로 설정하면 됩니다.

번역 참고 1: 캔버스 좌표계에서 Y축 방향은 아래쪽입니다.

주석 2: context.arcTo() 메서드를 사용하여 호를 그릴 수도 있습니다. Steve Fulton과 Jeff Fulton이 쓴 원본 HTML5 Canvas 책에서 이 방법에 대한 설명은 완전히 잘못되었습니다. arcTo()의 올바른 요약은 곡선의 arcTo 를 참조하세요.