[javascript] CanvasRenderingContext2D.arc() 함수에 대하여

개요

CanvasRenderingContext2D.arc() 함수에 대하여 알아 보겠습니다.

---

기본 사용법

CanvasRenderingContext2D.arc() 함수는 다음과 같이 2가지 형태로 이용할 수 있습니다.

arc(x, y, radius, startAngle, endAngle)
arc(x, y, radius, startAngle, endAngle, counterclockwise)

각 파라미터가 의미하는 것은 다음 그림과 같습니다.

• x : 수평측 좌표
• y : 수직평측 좌표
• radius : 호의 반지름
• startAngle : 호의 시작 각도 (라디안 값)
• endAngle : 호의 끝 각도 (라디안 값)
• counterclockwise : 반시계 방향으로 그릴지에 대한 여부

---

90도 호 그리기

다음은 간단하게 arc() 함수를 이용하여 호를 그리는 예제 소스입니다.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.strokeStyle = '#ff0000';
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI / 2);
//ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(300, 100, 80, 0, Math.PI / 2, true);
//ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(100, 300, 80, 0, Math.PI);
//ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(300, 300, 80, 0, Math.PI, true);
//ctx.closePath();
ctx.stroke();

위 예제 소스를 실행하면 다음과 같이 호가 그려집니다. 같은 매개변수이지만, 마지막 counterclockwise 값에 따라서 그려지는 호에 차이가 있다는 점을 주의하셔야 합니다.

위 예제 소스에서 ctx.closePath()의 주석을 해제하면 다음과 같이 닫혀진 호가 그려집니다.

---

참고자료

• "CanvasRenderingContext2D: arc() method":https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc