HTML5 Canvas_html5 튜토리얼 기술에서 경로를 사용하여 2차 및 3차 베지어 곡선 그리기

HTML5 Canvas에서는 다음 방법을 사용하여 3차 및 2차 베지어 곡선을 그릴 수 있습니다.

코드 복사

코드는 다음과 같습니다.

context.bezierCurveTo(cp1x, cp1y, cp2x , cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)

베지어 곡선은 2차원 평면에서 "시작점", "끝점" 및 하나 이상의 "제어점"으로 정의된 곡선입니다. 일반적인 3차 베지어 곡선은 두 개의 제어점을 사용하는 반면, 2차 곡선은 하나의 제어점만 사용합니다.

2차 베지어 곡선을 그리려면 끝점의 좌표와 제어점의 좌표를 설정하면 됩니다.

코드 복사

코드는 다음과 같습니다.

context.moveTo(0, 0);
context.quadraticCurveTo(100,25,0,50);

코드 실행 결과는 다음과 같습니다.

위 예시의 곡선은 좌표 (0,0)에서 시작하여 (0,50)에서 끝나며, 곡선 그리기를 제어하는 ​​제어점의 좌표는 (100,25)입니다.

2차 곡선에 비해 3차 베지어 곡선 그리기는 두 개의 제어점을 설정할 수 있기 때문에 더 유연합니다. 다음 코드는 "S"자 모양의 곡선을 그립니다.

코드 복사

코드는 다음과 같습니다.

context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);

번역 참고 1: 베지어 곡선에 대해서는 Wikipedia(http://en.wikipedia.org/wiki/Bézier_curve) 항목을 참조할 수 있습니다. 애니메이션에 베지어 곡선 생성 메커니즘이 잘 설명되어 있습니다.

주석 2: 현재 HTML5 Canvas는 최대 3차 베지어 곡선까지만 지원하며 4차 이상의 곡선은 아직 지원되지 않습니다.