Html5 Canvas 예비 연구 노트(10) - 복잡한 경로

이전에 간단한 그리기 경로를 소개한 적이 있습니다. 먼저 폴리선 그리기에 대해 소개합니다.

코드는 다음과 같습니다.

context.beginPath();
context.moveTo(100,50);
//context.lineTo(100,50);
context.lineTo(150,150);
context.lineTo(50,150);
//context.closePath();
context.stroke();

이전에 소개한moveTo에 시작점의 가로,세로 좌표를 붙여서 시도해보았는데, 첫 번째는 lineTo 다음 lineTo도 가능합니다. 이 지점에서 다음 지점까지 직선을 그리는 것입니다. 그런 다음 이 지점을 시작점으로 사용하고 lineTo를 이전 지점에서 이 지점으로 조정합니다. context.closePath(); 현재 지점은 가장 빠른 시작점에 연결되어 닫힌 삼각형을 형성합니다.

베지어 곡선 아래 베셀 살펴보기: 베지어 곡선을 구현하는 방법에는 두 가지가 있습니다: quadraticCurveTo 및 bezierCurveTo 각각 2차 베지어 곡선과 3차 베지어 곡선인 세르 곡선과 2차 베지어 곡선의 차이점은 정점이 하나인 반면, 3차 베지어 곡선은 정점과 최저점을 모두 갖는다는 것입니다. 2차 베지어 곡선에서 효과는 다음과 같습니다. >코드는 다음과 같습니다:

context.beginPath();
context.moveTo(50,250);
//context.lineTo(50,250);
context.quadraticCurveTo(150,100,250,250);
//context.closePath();
context.stroke();

첫 번째가 시작점이며

moveTo 또는
lineTo

일 수도 있습니다. 그런 다음 quadraticCurveTo

를 호출합니다. 처음 두 매개변수는 제어점 좌표이고, 마지막 두 매개변수는 끝점의 가로좌표와 세로좌표입니다. 는 "파도 마루"의 가로좌표와 동일합니다. 파마 마루의 세로 좌표는 파마 마루의 세로 좌표와 관련이 있습니다. 즉, 세로 좌표가 클수록 파마 마루가 높아집니다.

context.closePath();을 열면 효과는 다음과 같습니다. 먼저 3차 베지어 곡선을 살펴보겠습니다. 먼저 효과를 살펴보겠습니다.

코드는 다음과 같습니다.

context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
//context.closePath();
context.stroke();

bezierCurveTo

의 세 매개변수는 첫 번째 또는 파동 최고점 또는 최저점의 가로좌표 및 세로좌표이고, 두 번째 파동의 최고점 또는 최저점과 끝점의 가로 좌표 및 세로 좌표도 열어서

context.closePath();
도 곡선을 닫으면 효과는 다음과 같습니다. :

위 내용은 Html5 Canvas 예비 학습노트(10) - Complex 내용입니다. 경로. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!