HTML5에서는 canvas태그에 다양한 도형을 간단하고 쉽게 그릴 수 있습니다. 도형 중에서 많이 사용되는 원을 그리는 방법을 알아봅니다. 어떻게하면 원을 그릴 수 있을까요?
# canvas 태그를 사용하여 원 그리는 방법캔버스에 원을 그리는 방법으로 두 가지 방법이 존재하며 컨텍스트에 다음 함수를 사용합니다. arc() 그리고 arcTo()입니다.

1. arc()
2. arcTo()

위의 두 가지 함수  모두 원을 그리는데 사용할 수 있는데 쓰이는 방식이 조금 다릅니다. arcTo()는 원보다는 이어진 곡선(curve)을 그리는데 많이 사용합니다. 여기서는 arc()를 사용하는 방법을 알아봅니다.



# arc()를 사용하여 원 그리는 방법arc()를 사용하여 원을 그리는 경우 아래와 같이 사용합니다. 먼저 설정 및 방법을 아래에서 알아보세요.

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

- x, y : 원을 그리게 될 가운데 위치
- radius : 반지름 값
- startAngle : angle 시작점
- endAngle : angle 끝나는 점
- clockwise : 옵션값. 시계 또는 반시계 방향을 결정함(기본값 false인 시계 방향)


! angle값에 따른 위치 알아보기
startAngle과 endAngle은 원을 그릴때 시작하는 값과 끝 값을 나타냅니다. 아래 이미지는 angle값에 따른 위치를 나타내는데 시작점은 0 그리고 끝나는 지점은 Math.PI * 2입니다.

스크린샷) angle 값 설정에 따른 위치
참고로 위 스크린샷처럼 맨 위의 12 방향은 0이 아니라 Math.PI * 1.5의 값을 가지게됩니다. 그렇기때문에 12시 방향에서 시작하려면 0값이 아니라 Math.PI * 1.5를 시작점으로 설정하여야합니다. 이 부분이 혼동되기 쉬운 부분입니다. 동그란 원을 그린다면 문제가 될게 없지만 예를들어 12시에서 3시 방향까지 이어지는 원의 일부를 그린다면 다음처럼 시작과 끝을 설정해야합니다. 아래에서 에제 4번이 바로 이렇게 설정한 예제입니다.

- startAngle : Math.PI * 1.5
- endAngle : Math.PI * 2

그럼 arc() 함수를 사용하는 간단한 예제들을 알아보겠습니다. 아래 예제들을 보고 어떻게 동작하는지 알아봅니다.


! arc() 사용하여 원 그리기 예제보기아래 예제는 몇 가지 원을 그리는 예제 코드입니다. 각각의 값들에 따라 어떻게 원이 그려지는지 알아보세요.
<canvas width="100" height="100"></canvas>

아래는 자바스크립트 적용코드입니다.
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 20, 0, Math.PI * 2);
ctx.stroke();

수행하면 아래와 같이 결과가 나타납니다.

@ 예제 1
ctx.arc(50, 50, 20, 0, Math.PI * 2);



@ 예제 2
ctx.arc(50, 50, 30, 0, Math.PI * 1.5);




@ 예제 3
ctx.arc(50, 50, 30, 0, Mah.PI * 1.5, true);



@ 예제 4 (12시 방향에서 시작)
ctx.arc(100, 100, 35, Math.PI * 1.5, Math.PI * 2);




# 원을 그릴때 Animation 효과 만드는 방법 원을 그릴때 한번에 그리는 것이 아닌 애니메이션~ 천천히 움직이면서 그리는 효과를 만들 경우가 있습니다. 예를들어 원 차트를 그릴때 이런 효과를 사용하면 좋겠죠. 만약 원을 사용하여 애니메이션을 구현하려면 어떻게 할까요?

Canvas 태그에 원을 그릴때도 Animation 효과를 구현할 수 있습니다. 이 때 두 가지 방법으로 구분할 수 있는데 각각 아래와 같습니다.

1. setTimeout() 등의 타이머 함수를 이용하는 방법
2. requestAnimationFrame()을 사용하는 방법

두 가지 방법 모두 사용이 가능합니다. 눈으로 보는 부분에서는 동일하나 requestAnimationFrame() 함수는 브라우저에서 지원하는 방법이므로 다른 방법보다 최적화, CPU나 메모리 등의 리소스 측면에서 더 우수합니다. 만약 animation이 필요한 객체가 굉장히 많다면 나은 성능을 위해서 requestAnimationFrame()이 더 나을 것입니다.


! setTimeout()을 사용하는 방법 알아보기
타이머 함수를 사용하는 방법으로 간단히 설명하면 설정된 시간에 따라 천천히 조금씩 그리는 애니메이션 효과 방법입니다. 간단하게 아래에서 어떻게 동작하는지 알아봅니다. 이번 예제는 0부터 Math.PI * 1.5까지 그리는 예제입니다.
<canvas id="myCanvas" width="200" height="200"></canvas>
<button type="button" onclick="animateCircle();">Draw</button>


@ animate.js
animateCircle = function() {
  var ctx = document.querySelector('#myCanvas').getContext('2d');
  var end = Math.PI * 1.5;
  for (var i = 0; i < 100; i++) {
    draw(i);
  };

  function draw(delay) {
    setTimeout(function() {
      ctx.clearRect(0, 0, 200, 200);
      ctx.beginPath();
      ctx.arc(100, 100, 50, 0, end / 100 * delay);
      ctx.stroke();
    }, delay * 10);
  }
};

아래는 위 예제를 실제로 구현하였습니다. 클릭해보세요.





! requestAnimationFrame() 방법 알아보기
이번에 알아볼 requestAnimationFrame() 콜백함수를 계속적으로 동작시키도록 하기 위해서 재귀함수 방법을 사용합니다.
var start = Math.PI * 1.5 / 100;
animate(start);


function animate(current) {
  var ctx = document.querySelector('requestCanvas');
  requestAnimationFrame() {
    ctx.arc(100, 100, 50, 0, current);
    if (current < Math.PI * 1.5) {
      current += current;
      animate(current);
    }
  }
}



여기까지 원을 캔버스 요소에 그리는 방법을 알아봤습니다. 원의 일부를 그리거나 곡선 등을 그리는 방법으로 arcTo()를 사용합니다. 다음 번에는 곡선을 그리는 방법에 대하여 알아보겠습니다.