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();
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Method | |||||
---|---|---|---|---|---|
bezierCurveTo() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
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 |