HTML 참조 매뉴얼

HTML 태그大全

HTML canvas arcTo() 메서드

arcTo()는 Canvas 2D API는 제어점과 반지름을 기반으로 원 궤도 경로를 그립니다. 현재描点(이전 moveTo나 lineTo 등 함수의 종료점)을 사용하여.1지정된 선과 제어점1제어점과2지정된 반지름의 원의 테이닝선으로 연결된 선을 그려, 두 테이닝선 사이의 궤도 경로를 그립니다.

HTML canvas 참조 매뉴얼

온라인 예제

두 테이닝선 사이의 궤도를 그립니다:

JavaScript:

예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
</head>
<body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();　
ctx.moveTo(20,20);　　　　　　　　　　　//　시작점을 생성합니다
ctx.lineTo(100,20);　　　　　　　　　　//　수평선을 생성합니다　
ctx.arcTo(150,20,150,70,50);　//　호를 생성합니다
ctx.lineTo(150,120);　　　　　　　　　//　수직선을 생성합니다
ctx.stroke();　　　　　　　　　　　　　　　　//　그려보세요
</script>
</body>
</html>

테스트해 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

정의와 사용법

arcTo() 메서드는 캔버스 위의 두 절삭선 사이에 호를 생성합니다/곡선.

ヒント:사용 방법: stroke() 캔버스 위에 정확한 호를 그립니다.

JavaScript 문법:	context.arcTo(x1,y1,x2,y2,r);

파라미터 값

파라미터	설명
x1	두 절삭선의 교차점의 가로 좌표.
y1	두 절삭선의 교차점의 세로 좌표.
x2	두 번째 절삭선의 점의 가로 좌표.
y2	두 번째 절삭선의 점의 세로 좌표.
r	원의 반지름.

중에서 첫 번째 선의 임의의 점의 가로와 세로 좌표는 마지막 점의 위치가 됩니다. 이 예제에서는 100,20。 (x1,y1),(x2,y2,(,100,20) 세 점이 두 직선의 위치를 결정하고 반지름으로는 원의 위치를 결정합니다.

HTML canvas 참조 매뉴얼

HTML: <template> 태그