JavaScript에서 canvas를 통해 원 그리기

다음 메서드 arc는 특정 점을 중심으로 하는 호를 그립니다. 이 메서드는 다음과 같은 매개변수를 받습니다: x, y, 반지름 r, 시작 각도 startAngle, 종료 각도 endAngle, 시계 방향 또는 시계 반대 방향으로 그리기 direction.

direction 매개변수는 다음과 같은 값을 받습니다: true는 시계 방향으로 그리도록 하고, false는 시계 반대 방향으로 그립니다(기본값).

arc 메서드에서 각도는 라디안 단위로 측정되며, 도 단위가 아닙니다. 도를 라디안으로 변환하려면 다음 함수를 사용할 수 있습니다:

javascriptfunction getRadians(degrees) {
  return (Math.PI / 180) * degrees;
}

원 그리기

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

Результат:

반원 그리기

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

Результат:

반원 채우기

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // 윤곽선 채우기

Результат:

실습 문제