html5 캔버스 그리기 튜토리얼(8) - canvas_html5 튜토리얼 기술에서 곡선을 그리기 위한 bezierCurveTo 메소드

이전 기사에서는 캔버스에 곡선을 그리는 세 가지 방법인 arc, arcTo 및 quadraticCurveTo에 대해 설명했습니다. 우리가 오늘 이야기하는 bezierCurveTo와 가장 큰 차이점은 그리는 곡선이 한쪽으로만 갈 수 있다는 것입니다. 즉, S자 모양의 곡선을 그릴 수 있다는 뜻입니다.

베지어 곡선이라고도 알려진 bezierCurveTo는 특정 그리기 도구를 배웠다면 즉시 이해할 수 있습니다.
bezierCurveTo의 구문은 다음과 같습니다:
ctx.bezierCurveTo(x1,y1,x2,y2,x,y); 평소대로 매개변수를 설명하겠습니다(x1,y1). is 제어점 1의 좌표, (x2, y2)는 제어점 2의 좌표, (x, y)는 끝점의 좌표입니다. QuadraticCurveTo와 마찬가지로 시작점 좌표도 moveTo에 의해 사전 설정됩니다.

따라서 bezierCurveTo는 곡선을 그리려면 시작점, 끝점, 제어점 1, 제어점 2의 4개 점이 필요합니다. 이후 설명을 위해 여기서는 제어점 1이 시작점에 해당한다고 가정합니다. , 제어점 2는 끝점에 해당합니다
여기서 캔버스 그리기의 오래된 문제를 다시 언급해야 합니다. 즉, 코드 그리기는 모두 추측을 기반으로 하며 어디에 그릴지 알기 위해서는 새로 고쳐야 합니다.

이전의 좋은 전통을 이어가며 모두가 이해할 수 있도록 보조선을 그어 보겠습니다.

코드 복사

코드는 다음과 같습니다.

var x1=450, //제어점 1의 x 좌표
y1 = 300, //제어점 1의 y
x2 = 450, // 제어점 2의 x
y2 = 500, // 제어점 2의 y
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.strokStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 1
// 시작점과 제어점 1을 연결합니다. ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
// 끝점과 제어점 2를 연결합니다.
ctx.moveTo(x2,y2); (x,y);// 시작점과 끝점 연결(기준선)
ctx.moveTo(300,300)
ctx.lineTo(x,y); );

여기서는 먼저 QuadraticCurveTo와 유사하게 한쪽으로만 기울어진 곡선을 그립니다. 제어점 1과 2의 x 좌표가 동일하기 때문에 이 선은 "매끄러워" 보입니다.

이제 bezierCurveTo가 다르다는 것을 증명하기 위해 또 다른 S자 곡선을 그립니다.

코드 복사

코드는 다음과 같습니다. var x1 = 150

...

사실 제어점 1의 좌표만 변경하면 됩니다. 제어점 1과 제어점 2의 좌표가 기준선의 양쪽에 있으면 S자 모양의 곡선이 그려지고, 둘 다 기준선의 한쪽에 있으면 QuadraticCurveTo와 비슷한 효과가 나타납니다.

이 예의 상황은 상대적으로 간단합니다. 기준선(시작점에서 끝점까지)은 수직이지만 실제 적용에서는 대부분의 경우 기준선이 기울어져 있으며 상황은 훨씬 더 복잡합니다. . 하지만 직접 해보세요

각각의 그리기 방법은 비교적 단일한 기능을 가지고 있는 것 같지만 강력한 방법은 개별 방법의 조합입니다. 후속 기사에서는 둥근 직사각형이나 타원과 같은 일부 기존 그래픽을 그리는 방법을 설명하려고 합니다. 이러한 이전 단일 방법의 조합이 필요합니다.