예
입방 베 지어 곡선을 그립니다 :
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke(); »그것을 자신을 시도 브라우저 지원
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬, 사파리는 지원 bezierCurveTo() 메소드를.
참고 : 인터넷 익스플로러 8 이전 버전은 지원하지 않습니다 <canvas> 요소를.
정의 및 사용
bezierCurveTo() 메소드는 큐빅 베 지어 곡선을 나타내는 지정된 컨트롤 포인트를 이용하여 전류 경로 점을 추가한다.
차식 베 지어 곡선은 세 가지 포인트가 필요합니다. 처음 두 점 큐빅 베 지어 연산에 사용하고, 마지막 포인트는 곡선의 종료점이다되고 통제 지점이다. 커브의 시작점은 전류 경로의 마지막 포인트이다. 경로가 존재하지 않으면, 사용 beginPath() 과 moveTo() 의 시작점을 정의하는 방법.
포인트를 시작합니다
의 moveTo (20,20) 컨트롤 포인트 (1)
후에 bezierCurveTo (20,100, 200,100,200,20) 컨트롤 포인트 (2)
후에 bezierCurveTo (20100, 200100, 200,20) 엔드 포인트
후에 bezierCurveTo (20100200100, 200,20) 팁 : 체크 아웃 quadraticCurveTo() 메소드를.대신 둘 중 하나를 제어 구역이 (가) 있습니다.
| 자바 스크립트 구문 : | context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); |
|---|
매개 변수 값
| 매개 변수 | 기술 | 플레이 |
|---|---|---|
| cp1x | 상기 제 베 지어 제어점의 X 좌표는 | »플레이 |
| cp1y | 상기 제 베 지어 제어점의 Y 좌표는 | »플레이 |
| cp2x | 다음은 두 번째 베 지어 제어점의 x는 좌표 | »플레이 |
| cp2y | 상기 제 베 지어 제어점의 Y 좌표는 | »플레이 |
| x | 다음은 끝점의 x는 좌표 | »플레이 |
| y | 다음은 끝점의 y는 좌표 | »플레이 |