HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML canvas quadraticCurveTo() 메서드

quadraticCurveTo()는 Canvas 2D API는 이차 베제르 곡선 경로 메서드를 추가했습니다. 이는 다음과 같이 필요합니다.2개 점. 첫 번째 점은 제어점이며, 두 번째 점은 끝점입니다. 시작점은 현재 경로에서 가장 최근의 점이며, 이차 베제르 곡선을 생성하기 전에 moveTo() 메서드를 사용하여 변경할 수 있습니다.

HTML canvas 참조 매뉴얼

온라인 예제

이차 베제르 곡선을 그립니다:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas bezierCurveTo() 메서드 사용-기본 강의(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다.5　canvas 태그.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, Safari는 quadraticCurveTo()를 지원합니다. 메서드.

주의:Internet Explorer 8 이전 버전은 <canvas> 요소를 지원하지 않습니다.

정의와 사용법

quadraticCurveTo() 메서드를 사용하여 지정된 제어점을 통해 현재 경로에 점을 추가합니다.

퀵비엘러 퍼셉트는 두 개의 점이 필요합니다. 첫 번째 점은 퀵비엘러 계산에 사용되는 제어점이며, 두 번째 점은 곡선의 끝점입니다. 곡선의 시작점은 현재 경로의 마지막 점입니다. 경로가 없다면, 다음을 사용하여 beginPath() 과 moveTo() 시작점을 정의하는 메서드를 사용합니다.

시작점:

moveTo(20,20)

제어점:

quadraticCurveTo(20,100,200,20)

끝점:

quadraticCurveTo(20,100,200,20)

ヒント:다음을 참조하십시오: bezierCurveTo() 메서드는 두 개의 제어점을 가지고 있습니다. 하나만이 아닙니다.

JavaScript 문법:	context.quadraticCurveTo(cpx,cpy,x,y);

파라미터 값

파라미터	설명
cpx	베塞尔 제어점의 x 좌표.
cpy	베塞尔 제어점의 y 좌표.
x	끝점의 x 좌표.
y	끝점의 y 좌표.

HTML canvas 참조 매뉴얼

HTML: <template> 태그