HTML 참조 가이드

HTML 태그 전체 목록

HTML canvas bezierCurveTo() 메서드

bezierCurveTo()는 Canvas 2D API는 세 차원 베塞尔 곡선 경로를 그리는 방법을 제공합니다. 이 메서드는 세 개의 점이 필요합니다. 첫 번째와 두 번째 점은 제어점이며, 세 번째 점은 종료점입니다. 시작점은 현재 경로의 마지막 점이며, 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>
您的浏览器不支持　HTML5　canvas 태그.
</canvas>
<script>
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();
</script>　
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

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

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

정의와 사용법

bezierCurveTo() 메서드는 세 차원 베塞尔 곡선을 나타내는 지정된 제어점을 사용하여 현재 경로에 점을 추가합니다.

세 번째 베塞尔 곡선은 세 개의 점이 필요합니다. 전체 두 개의 점은 세 번째 베塞尔 계산에 사용되는 제어점이며, 세 번째 점은 곡선의 끝점입니다. 곡선의 시작점은 현재 경로의 마지막 점입니다. 경로가 없다면, 사용하십시오. beginPath() 과 moveTo() 시작점을 정의하는 메서드를 사용합니다.

시작점:

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() 메서드는 두 개의 제어점 대신 하나의 제어점을 가집니다.

JavaScript 문법:	context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

파라미터 값

파라미터	설명
cp1x	첫 번째 베塞尔 제어점의 x 좌표.
cp1y	첫 번째 베塞尔 제어점의 y 좌표.
cp2x	두 번째 베塞尔 제어점의 x 좌표.
cp2y	두 번째 베塞尔 제어점의 y 좌표.
x	끝점의 x 좌표.
y	끝점의 y 좌표.

HTML canvas 참조 매뉴얼

HTML: <template> 태그