HTML 캔버스 quadraticCurveTo() 메서드
예시
2차 베지어 곡선 그리기:
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
quadraticCurveTo() 메서드는 2차 베지어 곡선을 나타내는 지정된 제어점을 사용하여 현재 경로에 점을 추가합니다.
2차 베지어 곡선에는 두 점이 필요합니다. 첫 번째 점은 2차 베지어 계산에 사용되는 제어점이고 두 번째 점은 곡선의 끝점입니다. 곡선의 시작점은 현재 경로의 마지막 점입니다. 경로가 존재하지 않으면 beginPath() 및 moveTo() 메서드를 사용하여 시작점을 정의합니다.
시작점:
이동( 20,20 )
기준점:
quadraticCurveTo ( 20,100 , 200,20 )
종료 지점:
2차 곡선까지 (20,100, 200,20 )
팁: bezierCurveTo() 메서드 를 확인하십시오 . 하나가 아닌 두 개의 제어점이 있습니다.
| 자바스크립트 구문: | 컨텍스트 .quadraticCurveTo(cpx ,cpy,x,y ); |
|---|
매개변수 값
| Parameter | Description | Play it |
|---|---|---|
| cpx | The x-coordinate of the Bézier control point | |
| cpy | The y-coordinate of the Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ HTML 캔버스 참조