HTML 캔버스 bezierCurveTo() 메서드
예시
3차 베지어 곡선 그리기:
자바스크립트:
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();
브라우저 지원
Internet Explorer 9, Firefox, Opera, Chrome 및 Safari는 bezierCurveTo() 메서드를 지원합니다.
정의 및 사용
bezierCurveTo() 메서드는 3차 베지어 곡선을 나타내는 지정된 제어점을 사용하여 현재 경로에 점을 추가합니다.
3차 베지어 곡선에는 3개의 점이 필요합니다. 처음 두 점은 3차 베지어 계산에 사용되는 제어점이고 마지막 점은 곡선의 끝점입니다. 곡선의 시작점은 현재 경로의 마지막 점입니다. 경로가 존재하지 않으면 beginPath() 및 moveTo() 메서드를 사용하여 시작점을 정의합니다.
시작점
이동( 20,20 )
컨트롤 포인트 1
bezierCurveTo( 20,100 ,200,100,200,20)
컨트롤 포인트 2
bezierCurveTo(20,100, 200,100,200,20 )
종점
bezierCurveTo(20,100,200,100, 200,20 )
팁: quadraticCurveTo() 메서드 를 확인하십시오 . 제어 지점이 두 개가 아닌 하나입니다.
| 자바스크립트 구문: | 컨텍스트 .bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ); |
|---|
매개변수 값
| Parameter | Description | Play it |
|---|---|---|
| cp1x | The x-coordinate of the first Bézier control point | |
| cp1y | The y-coordinate of the first Bézier control point | |
| cp2x | The x-coordinate of the second Bézier control point | |
| cp2y | The y-coordinate of the second Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ HTML 캔버스 참조