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

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

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

코드 복사

코드는 다음과 같습니다.

context.arc()
context .arc(x, y, radius, startAngle, endAngle, anticlockwise)

위 메서드 설명에서 x와 y는 원의 중심을 정의하고, radius는 원의 반경을 정의합니다. 원. startAngle과 endAngle은 극좌표 값으로 표현됩니다. 시계 반대 방향(부울)은 호의 방향을 정의합니다.

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

코드 복사

코드는 다음과 같습니다.

context.arc(100, 100, 20, (Math.PI/180)* 0, (Math.PI/180) *360, false);

실행 효과는 다음과 같습니다.

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

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

코드 복사

코드는 다음과 같습니다.

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

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

코드 복사

코드는 다음과 같습니다.

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)* 90, 참);

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

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