html5 캔버스 그리기 튜토리얼(5) - canvas_html5 튜토리얼 기술에서 곡선을 그리는 원호 방법

이번 캔버스에 선 그리기 기사에서는 직선을 그리는 방법에 대해 이야기했습니다. 논리적으로 곡선 그리기에 관한 이 기사는 오래 전에 게시되었어야 했지만, 캔버스에 곡선을 그리는 것은 꽤 특별하기 때문에 저는 그렇게 하지 않았습니다. 아직 파악하지 못했으니 차근차근 시도해 보세요.
캔버스에서 곡선을 그릴 때 어려운 점 중 하나는 곡선에 대한 기능이 4가지뿐이라는 점이에요! 그들은 arc, arcTo,quadraticCurveTo 및 bezierCurveTo입니다. 가장 간단한 호 방법부터 시작하겠습니다.
호의 기능은 완전한 원일 수도 있고 원의 특정 호일 수도 있는 규칙적인 호를 그리는 것입니다. arc의 구문은 다음과 같습니다. 🎜>

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
매개변수를 설명하겠습니다.
arc(원의 중심 x, 원의 중심 y, 반지름, 시작 각도, 끝 각도, 시계 반대 방향 여부)

원호를 사용하여 완전한 원을 그리려면 어떻게 해야 하나요? 매개변수에 시작 각도와 끝 각도가 있다는 것을 모두가 알아차렸습니다. 시작 각도가 0이고 끝 각도가 360이라면 완벽한 원이 아닌가요?

정답! 그러나 여기서 각도는 "라디안"으로 표시됩니다(Flash의 경우에도 마찬가지). 완전한 원은 360도, 즉 2PI 라디안입니다. 그러므로 를 다음과 같이 작성합니다.

코드 복사


코드


ctx.arc(400,400,20,0,Math.PI*2) ctx.fill() ctx.Stroke(); >

lineTo와 마찬가지로 arc도 그리기 경로이므로 그래픽을 표시하려면 그 뒤에 있는 fill 또는 스트로크 메서드를 호출해야 합니다(그림에서는 빨간색 스트로크 스타일과 반투명 빨간색 채우기 스타일이 사용됨).

이제 각도가 90도인 1/4원을 그려보겠습니다. 앞서 언급했듯이 360도 각도는 2PI 라디안이므로 1도 각도는 2PI/360=PI/180 라디안이고 90도는 2PI/360*90=PI/2 라디안입니다. (다른 각도는 직접 계산하세요.) ).

코드 복사

코드는 다음과 같습니다.

ctx.arc(400,400, 20,0 ,Math.PI*2/4);

그림에서 호의 0도는 수학에서 일반적으로 사용되는 0도임을 알 수 있습니다. , 그러나 각도의 기본값은 The hour hand is open이며 이는 수학적 모델과 반대입니다(캔버스 좌표도 수학적 좌표와 반대이기 때문에 좌표와 관련이 있습니다).

그런데 반시계방향인지 판단하는 매개변수가 앞에 있지 않나요? true로 설정하면 어떨까요?

코드 복사

코드는 다음과 같습니다.

ctx.arc(400,400, 20,0 ,Math.PI*2/4,true);

각도가 시계 반대 방향으로 바뀌어 호가 360 -90이 되는 것을 볼 수 있습니다. =270도.

하지만! 모두가 주목해야 할 점은 시작점과 끝점의 계산 방법이 항상 0도에서 시작하여 시계 방향으로 확장된다는 것입니다. 시계 방향과 시계 반대 방향은 호가 그려지는 방향일 뿐입니다. 이렇게 하면 왔다 갔다 하는 혼란을 방지할 수 있을 뿐만 아니라 계산도 더 쉬워집니다. 그러나 시계 반대 방향을 유연하게 사용하는 것이 때로는 유용할 수 있습니다. 위 예에서 시작 각도는 모두 0입니다. 이제 90도와 같은 다른 시작 각도를 시도해 보겠습니다.

코드 복사

코드는 다음과 같습니다.


ctx.arc(400,400, 20,Math .PI*2/4,Math.PI*2 Math.PI)


시작점이 90도이고 끝점도 90도이면 결과는 아무것도 아닙니다. 그릴 수 있으므로 끝점을 두고 각도를 180도로 변경하여 최종적으로 아래와 같은 그래프가 얻어졌습니다.

질문: 0도가 아닌 시작점에서 완전한 원을 그리면 괜찮을까요? 물론 다음과 같이 호의 끝점을 360도 시작 각도로 설정하면 가능합니다.

코드 복사

코드는 다음과 같습니다:

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2 Math.PI*2/4) / /시작점은 90도, 끝점은 360 90도

그러나 이 접근 방식은 단지 문제를 찾는 것일 뿐 일반 사람들은 사용하지 않을 것입니다.
요약: Canvas의 호 방법은 양의 호만 그릴 수 있고 S자 같은 다른 이상한 호는 그릴 수 없습니다. 하지만 저는 S를 가장 좋아합니다. - 모양.