HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML canvas arc() 메서드

arc()는 Canvas 2D API는 원주미 경로를 그리는 메서드입니다. 원주미 경로의 원심은 (x, y) 위치에 있으며, 반지름이 r이며, anticlockwise (기본적으로 시계 방향)이 지정된 방향에서 startAngle에서 시작하여 endAngle까지 그립니다.

HTML canvas 참조 설명서

온라인 예제

원을 그립니다:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas arc() 메서드 사용-기본 강의(w3(codebox.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.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>　
</body>
</html>

테스트를 보고 보기 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

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

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

정의와 사용법

arc() 메서드는弧을 생성합니다./곡선(원 또는 원의 일부를 만들기 위해 사용됩니다).

추가 정보:arc()를 통해 원을 만들 때, 시작 각도를 0으로 설정하고, 종료 각도를 다음과 같이 설정합니다:2 * Math.PI.

추가 정보:사용: stroke() 또는fill() 캔버스에 실제로弧을 그리는 메서드.

중심:

arc(100,75,50,0*Math.PI,1.5*Math.PI)

시작角:

arc(100,75,50,0,1.5*Math.PI)

끝角:

arc(100,75,50,0*Math.PI,1.5*Math.PI)

JavaScript 문법:	context.arc(x,y,r,sAngle,eAngle,반시계);

파라미터 값

파라미터	설명
x	원의 중심의 x 좌표.
y	원의 중심의 y 좌표.
r	원의 반지름.
sAngle	시작角, 반지름 단위로 계산됩니다(원의 3시 방향은 0도입니다).
eAngle	끝角, 반지름 단위로 계산됩니다.
반시계	선택 사항. 반시계 방향으로 그리는지 시계 방향으로 그리는지 지정합니다. False = 시계 방향, true = 반시계 방향.

HTML canvas 참조 설명서

HTML: <template> 태그