html5 캔버스 드로잉 자습서 (5) - 캔버스에서 곡선을 그리는 아크 메소드

캔버스 드로잉 라인에 관한 기사에서 나는 직선을 그리는 방법에 대해 이야기했습니다. 그리기 곡선에 관한이 기사는 오래 전에 출판되어야했지만 캔버스 드로잉 곡선은 매우 특별하기 때문에 아직 이해하지 못했기 때문에 단계별로 시도해야합니다.

캔버스에서 곡선을 그리는 데 어려움 중 하나는 곡선의 4 가지 기능이 있다는 것입니다! 그것들은 아크, 아크로, 2 차 곡선, 베 지에르 쿠 베트입니다. 가장 간단한 아크 방법으로 시작하겠습니다.

아크의 기능은 일반 아크를 그리는 것입니다.이 아크는 완전한 원이거나 원의 특정 호가 될 수 있습니다.

context.arc (x, y, radius, startangle, endangle, anticlockowice)

그의 매개 변수를 설명하겠습니다

아크 (중심 X, 중심 Y, 반경, 시작 각도, 엔딩 각도 또는 시계 반대 방향인지 여부)

아크로 완전한 원을 그리면 어떻게해야합니까? 모든 사람들은 매개 변수에 시작 각도와 엔드 각도가 있음을 알았습니다. 우리의 시작 각도가 0이고 끝 각도가 360이면 완벽한 원이 아닌가?

올바른 해결책! 그러나 여기의 각도는 라디안으로 표현된다는 점에 유의해야합니다 (플래시도 마찬가지입니다). 완전한 원은 360도이며 2PI 라디안입니다.

ctx.arc (400,400,20,0, math.pi*2);

ctx.fill ();

ctx.stroke ();

Lineto와 마찬가지로 Arc는 또한 그리기 경로이므로 그림을 표시하기 위해 채우기 또는 스트로크 방법을 호출해야합니다 (빨간 스트로크 스타일과 반투명 빨간색 충전 스타일이 그림에 사용됩니다).

이제 1/4 원을 그리겠습니다. 각도는 90도입니다. 앞에서 언급했듯이 360 도의 각도는 2PI 라디안이고, 10 도의 각도는 2PI/360 = PI/180 라디안이고 90도는 2PI/360*90 = PI/2 라디안입니다 (다른 각도를 직접 계산하십시오).

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

그림에서, 우리는 0 도의 아크가 수학에서 일반적으로 사용되는 0 도이라고 판단 할 수 있지만 기본적으로 각도는 시계 방향으로 열리 며 수학적 모델과 반대입니다 (캔버스 좌표가 수학 좌표와 반대이기 때문에 좌표와 관련이 있습니다).

그러나 반대 방향으로 여부를 결정하는 매개 변수가 없습니까? 우리가 그를 진정으로 설정하는 것은 어떻습니까?

ctx.arc (400,400,20,0, math.pi*2/4, true);

각도가 시계 반대 방향으로되어 아크가 360-90 = 270도가됩니다.

하지만! 주의를 기울여야 할 한 가지는 출발점과 종말점의 계산 방법이 항상 0도를 기준으로하며 시계 방향으로 연장되며 Cisco와 그 반대가 사실이라는 말은 없습니다. 시계 반대 방향은 아크의 방향 일뿐입니다.

이것은 혼란이 앞뒤로 진행되는 것을 방해 할뿐만 아니라 계산하기가 더 쉬워집니다.

그러나 시계 반대 방향을 유연하게 사용하는 것이 때때로 유용합니다.

위의 예에서 시작 각도는 0입니다. 이제 90도와 같은 다른 시작 각도를 시도해 봅시다.

ctx.arc (400,400,20, math.pi*2/4, math.pi*2+math.pi);

우리의 출발점이 90도이고 종점이 90 도인 경우 결과는 아무것도 그릴 수 없기 때문에 엔드 포인트 각도를 180 도로 변경하고 마지막으로 아래 그림에서 그림을 얻었습니다.

ctx.arc (400,400,20, math.pi*2/4, math.pi*2+math.pi*2/4); // 시작점은 90도이고 종점은 360+90도입니다.

그러나이 접근법은 순전히 문제없이 문제를 찾는 문제이며, 평범한 사람들은 그것을 사용하지 않을 것입니다.