댓글 : Arc와 Arcto는 그 이름에서 볼 수 있습니다. Arcto는 또한 곡선을 그리는 방법이며, 그가 그리는 곡선은 또한 완벽한 원의 아크입니다. 그러나 그의 매개 변수와 아크는 단순히 비결 할 수 없습니다 ~ 관심있는 친구들은 그것에 대해 배울 수 있습니다. 다음으로 Arcto 메소드의 적용을 자세히 소개하겠습니다.
이전 기사는 캔버스의 아크 방법에 대해 이야기 했으며이 기사는 이와 관련된 아크토 방법에 대해 이야기했습니다.아크와 아크로는 그 이름에서 볼 수 있습니다. Arcto는 또한 곡선을 그리는 방법이며, 그가 그리는 곡선은 또한 완벽한 원의 아크입니다. 그러나 그의 매개 변수와 아크는 단순히 관련이 없습니다 ~
ctx.arcto (x1, y1, x2, y2, 반경); Arcto 매개 변수에는 두 가지 점이 포함 되며이 두 점은 원의 중심을 나타내지 않습니다. 마지막 매개 변수 만 원의 반경이며 Arcto와 원이 약간의 관계가 있음을 나타냅니다.
Arcto Online에 관한 기사는 거의 없으며 마침내 그 중 하나가 외국인이라는 것을 알았습니다. 그리고 캔버스 그림을위한 직관적 인 도구는 없으므로 Arcto는 오랫동안 추측하게 만들었습니다. .
직관적 인 설명을 위해 보조 방법을 취했습니다. Arcto가 그려지는 곳마다 Lineto를 사용하여 해당 점을 그려 관계를 확인했습니다. 보조 라인을 그립니다.
var x0 = 100,
Y0 = 400,
x1 = 500,
Y1 = 400,
x2 = 450,
Y2 = 450;
ctx.beginpath ();
ctx.moveto (x0, y0);
ctx.strokestyle = "#f00";
ctx.linewidth = 2;
ctx.arcto (x1, y1, x2, y2,20);
ctx.stroke ();
ctx.beginpath ();
ctx.strokestyle = "RGBA (0,0,0,0.5)";
ctx.linewidth = 1;
ctx.moveto (x0, y0);
ctx.lineto (x1, y1);
ctx.filltext ( 'x1, y1', x1+10, y1+10)
ctx.lineto (x2, y2);
ctx.filltext ( 'x2, y2', x2+10, y2)
ctx.stroke ();
코드가 많지만 실제로는 매우 간단합니다. 좌표 값을 저장하기 위해 여러 변수를 사용했고 나머지는 Canvas 작업이었습니다.
변수 설명 : x0, y0은 시작점 좌표, x1, y1은 첫 번째 포인트 좌표이고 x2, y2는 두 번째 포인트 좌표입니다. Lineto가 그린 직선은 반투명 1px 블랙 라인이며 Arcto로 그려진 선은 2px의 빨간색 선입니다.
페이지를 새로 고치면 아래 그림이 표시됩니다.
나는이 빨간 선이 후크처럼 보인다고 말해야한다.
그래서 Arcto의 법칙이 발견되었습니다. 실제로 시작점, 지점 1 및 포인트 2에서 두 개의 직선을 통해 각도를 형성했으며,이 두 줄은 또한 파라미터 원의 접선 라인입니다.
원의 반경은 원이 선으로 가장자리를 절단 할 위치를 결정합니다. 그것은 공이 죽은 구석으로 굴리는 것과 같습니다. 공이 작을수록 더 많이 굴릴수록 죽은 코너에 가까워집니다. 공이 클수록 반대는 사실입니다.
이것은 매우 심각한 학문적 문제이므로 YY를 원하지 않습니다.
공을 더 크게 만들어 봅시다!
ctx.arcto (x1, y1, x2, y2,50); // 반경이 50으로 변경됩니다
그림과 같이, 당신은 아크가 커지고 직선에 접하는 것을 알 수 있습니다.
물론 탄젠트가 무한히 확장되어 있기 때문에 실제로는 여전히 탄젠트입니다.
우리는 계속 탐색하고 원을 계속 키우고 출발점과 첫 번째 지점 사이의 거리를 단축합니다.
var x0 = 400; // 시작점 X 좌표가 100에서 400으로 변경됩니다.
...
ctx.arcto (x1, y1, x2, y2,100); // 원의 반경은 100으로 커지고 그러한 이상한 그림을 볼 수 있습니다.
그것은 원래 고리 였지만 이제는 구부러져 반대 방향으로 바뀌 었습니다! 와인 병 홀더와 비슷합니다.그러나이 원은 여전히 두 줄에 접하는 것입니다! 그러나 이제 두 줄의 길이는이 원을 만족시킬 수 없습니다! 그는 두 와이어를 무선으로 확장했습니다!
이 후크 핸들은 언제 반전됩니까? 지오메트리가 양호한 경우 점과 원의 탄젠트 방정식을 이해하려고 노력할 수 있습니다.
Arcto 방법에는 매우 중요한 점이 있습니다. 이 중요한 점은 코드에서 (x1, y1)입니다. 원의 접선 지점까지의 거리는 원의 거리가 시작점에서 출발점 (x0, y0)까지의 거리를 초과하는 한, 반전됩니다.
그림에서 우리는이 지점 (x2, y2)의 좌표가 무한히 변할 수 있음을 알 수 있습니다. 그것이 항상 접선 라인의 포인트 인 한, Arcto가 그린 그래프는 원의 반경이 변경되지 않은 상태에서 전혀 변하지 않습니다. 이것은 특별한주의가 필요합니다.
이 제안을 확인하기 위해 테이블에 올라갈 수없는 기하학적 지식을 사용하겠습니다. 계산을 위해 먼저 두 줄 사이의 각도를 90 도로 변경했습니다.
var x0 = 100,
Y0 = 400,
x1 = 500,
Y1 = 400,
x2 = 500,
Y2 = 450;
변경 후 90도 개방됩니다! 우리는 볼의 반경을 변하지 않게 유지합니다. 새로 고침 후 :
우리는 Y2를 더 크게 만듭니다. 즉, 탄젠트 라인을 확장하고 550으로 바꾸고 새로 고침됩니다.
탄젠트 라인은 확장되었지만 Arcto가 그린 빨간색 선은 전혀 변하지 않았습니다.