>웹 프론트엔드 >H5 튜토리얼 >HTML5 Canvas_html5 튜토리얼 기술에서 경로를 사용하여 2차 및 3차 베지어 곡선 그리기

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

WBOY
WBOY원래의
2016-05-16 15:46:511286검색

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차 이상의 곡선은 아직 지원되지 않습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.