이전 기사에서는 캔버스에서 곡선을 그리는 세 가지 방법 인 Arc, Arcto 및 Quadraticcurveto에 대해 이야기했습니다. 그들은 모두 공통점, 즉 그들이 그리는 곡선은 한쪽으로 만 편향 될 수 있습니다. 오늘 언급 된 Beziercurveto의 가장 큰 차이점은 두 가지 제어점이 있다는 것입니다. 즉, S 자형 곡선을 그릴 수 있습니다.
소위 Bezier 곡선 인 Beziercurveto는 드로잉 도구를 배운 경우 즉시 이해할 수 있습니다.
Beziercurveto의 구문은 다음과 같습니다 .ctx.beziercurveto (x1, y1, x2, y2, x, y); 평소와 같이 그의 매개 변수를 설명하겠습니다. (x1, y1)은 제어점 1의 좌표이며 (x2, y2)는 제어점 2의 좌표이고 (x, y)는 그 점점의 좌표입니다. 2 차 큐 베트와 마찬가지로, 시작점 좌표는 Moveto에 의해 미리 설정되어 있습니다.
따라서 Beziercurveto 곡선을 그리는 곡선은 4 점을 필요로합니다 : 시작점, 종말점, 제어점 1, 제어점 2. 후속 설명의 경우, 여기서는 제어점 1이 출발점에 해당하고 제어점 2가 종말점에 해당한다고 가정합니다.
여기서 우리는 캔버스 도면의 오래된 문제를 언급 할 것입니다. 즉, 코드 도면은 모두 추측을 기반으로하며, 그곳을 그린 위치를 이해하려면 도면을 새로 고침해야합니다.
나는 이전의 훌륭한 전통을 계속하고 모든 사람들이 이해할 수 있도록 보조 라인을 그릴 것입니다.
var x1 = 450, // 제어 지점의 x 좌표 1
y1 = 300, // y의 제어점 1
x2 = 450, // x의 제어점 2
y2 = 500, // y의 제어점 2
x = 300, // 엔드 포인트 x
y = 500; // 엔드 포인트 y
ctx.moveto (300,300); // 시작점
ctx.beginpath ();
ctx.linewidth = 5;
ctx.strokestyle = "RGBA (0,0,0,1)"
Ctx.Moveto (300,300);
ctx.beziercurveto (x1, y1, x2, y2, x, y);
ctx.stroke ();
// 보조 라인을 그리기 시작합니다
ctx.beginpath ();
ctx.strokestyle = "RGBA (255,0,0,0.5)";
ctx.linewidth = 1;
// 시작점과 제어점을 연결합니다 1
Ctx.Moveto (300,300);
ctx.lineto (x1, y1);
// 엔드 포인트와 제어점 2를 연결합니다
ctx.moveto (x2, y2);
ctx.lineto (x, y);
// 시작 및 엔드 포인트 연결 (기준선)
Ctx.Moveto (300,300);
ctx.lineto (x, y);
ctx.stroke ();
여기서 나는 먼저 2 차 urveto와 비슷한 곡선을 그립니다. 제어점 1과 2의 x 좌표가 동일하기 때문에이 라인은 비교적 둥글다.
이제 Beziercurveto가 독특하다는 것을 증명하기 위해 S 자형 곡선을 그립니다.
var x1 = 150;
...
실제로, 제어점 1의 좌표를 변경하십시오. 제어점 1과 제어점 2의 좌표가 각각 기준선의 양쪽에있는 경우, S 자형 곡선이 그려집니다. 둘 다 기준의 한쪽에 있으면 2 차 urveto와 유사한 효과입니다.
이 예제의 상황은 비교적 간단합니다. 기준선 (시작점에서 엔드 포인트)은 수직이지만 대부분의 시간은 실제 적용에서는 기준선이 비스듬하므로 상황이 훨씬 더 복잡합니다. 그러나 직접 시도해 봅시다
각 도면 방법은 비교적 단일 기능이 작동하지만 강력한 방법은 단일 방법으로 결합됩니다. 후속 기사에서, 나는 둥근 직사각형 및 타원과 같은 몇 가지 일반적인 그리기 방법을 설명하려고 노력했습니다. 그들은 과거에 이러한 단일 방법을 결합해야했습니다.