JavaScript에서 canvas를 통해 원 그리기
다음 메서드 arc는 특정 점을 중심으로 하는
호를 그립니다. 이 메서드는 다음과 같은 매개변수를 받습니다:
x, y, 반지름 r,
시작 각도 startAngle, 종료
각도 endAngle, 시계 방향 또는 시계 반대 방향으로 그리기 direction.
direction 매개변수는 다음과 같은 값을 받습니다: true는
시계 방향으로 그리도록 하고, false는 시계 반대 방향으로 그립니다(기본값).
arc 메서드에서 각도는 라디안 단위로 측정되며,
도 단위가 아닙니다. 도를 라디안으로 변환하려면
다음 함수를 사용할 수 있습니다:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
원 그리기
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();
:
반원 그리기
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();
:
반원 채우기
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // 윤곽선 채우기
:
