댓글 : 오늘 저는 2 차 쿠베타 방법으로 곡선을 그리는 것에 대해 이야기 할 것입니다. 2 차는 2 차, 즉 수학의 2 차 방정식을 의미합니다. 다음으로, 우리는 2 차 urveto 방법의 사용을 자세히 소개합니다. 관심있는 친구들은 그것에 대해 배울 수 있습니다.
캔버스에서 곡선을 그리는 방법에 대해 계속 이야기합시다. 오늘 저는 2 차 쿠베에 대해 이야기 할 것입니다.솔직히 말해서,이 방법은 약간 무섭습니다. 먼저 기능의 이름에서 경험할 수 있습니다. 그건 그렇고,이 기능 이름을 단축해야한다고 생각합니다.
2 차는 2 차, 즉 수학의 2 차 2 차 방정식을 의미합니다. ctx.quadraticcurveto의 매개 변수는 다음과 같습니다.
ctx.quadraticcurveto (x1, y1, x, y);
x와 y는 종말점의 좌표이며 X1과 Y1은 곡선 제어 지점의 좌표입니까? 무엇? 출발점이 어디에 있는지 묻습니다. 시작점은이 전에 Moveto를 사용하여 결정됩니다.
제어점의 좌표를 일련 번호 1과 함께 넣은 이유는 나중에 언급 된 드로잉 곡선의 기능에 X2와 Y2의 두 가지 제어점이 있기 때문에 먼저 예방 접종을 제공하기 때문입니다.
Moveto에 의해 결정된 출발점 및 2 차 urveto 자체에 의해 결정된 종점은 직선으로 연결될 수 있습니다. 2 차 큐 베트는 하나의 제어 지점 만 가지 므로이 제어점은 선의 왼쪽 또는 선의 오른쪽에 있으므로 2 차 커브 토는 아크를 그릴 수 있지만 여전히 S 자형 선을 그릴 수는 없습니다.
쉽게 이해하기 위해 이전 기사에서 보조 라인을 그리는 방법을 계속 사용하겠습니다. 예비 코드는 다음과 같습니다.
var x1 = 350,
Y1 = 250,
x = 400,
y = 500;
ctx.beginpath ();
ctx.strokestyle = "#000";
Ctx.Moveto (300,300); // 시작점
ctx.quadraticcurveto (x1, y1, x, y); // 실제 곡선
ctx.stroke ();
ctx.beginpath ();
ctx.strokestyle = "RGBA (255,0,0,0.5)";
Ctx.Moveto (300,300);
ctx.lineto (x1, y1); //이 줄과 다음 줄은 제어점을 그리는 선입니다.
ctx.lineto (x, y);
ctx.moveto (300,300); // 곡선 시작 및 종말점의 시작 및 종말점
ctx.lineto (x, y);
ctx.stroke ();
여기서는 두 개의 보조 라인을 그렸습니다. 하나는 출발점과 종말점 사이의 연결선이고 다른 하나는 시작점과 제어점 사이의 보조 선입니다. 이 두 줄의 교차점은 2 차 urveto의 제어점 좌표입니다.
2 차 큐 베트는 아크에서만 곡선을 그릴 수 있지만,이 아크는 매우 불규칙 할 수 있으며, 이는 아크 및 아크토에 비해 개선입니다.
또한 2 차 쿠베 베토는 Arcto와 같은 반전이 없습니다.
물론, 제어점을 매우 멀리 잡아 당면 그래픽이 인식 할 수 없게 될 수 있습니다. 시도해 봅시다 :
Y1 = 950;
방금 Y1을 조금 더 크게 바꾸었고 곡선은 캔버스의 범위를 넘어 섰습니다.
그러나, 2 차 urveto에 의해 그려진 곡선의 범위는 제어점의 좌표에 도달하거나 초과 할 수 없습니다. 제어 지점을 잘 제어하면 걱정할 필요가 없습니다.
나는 2 차 큐 베트에서 곡선을 그리는 과정을 보여주는 간단한 움직이는 예제 페이지를 썼으며, 당신의 이해를 심화시키는 데 도움이되기를 바랍니다.
코드가 못 생겼다면 더 포괄적으로 보이십시오.