HTML <canvas> arc(), arcTo() 함수 - 호나 원 그리기

1. arc()

arc() 함수는 (x, y) 위치에 원점을 두면서, 반지름 r을 가지고 startAngle 에서 시작하여 endangle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다.

 

arc(x, y, radius, startAngle, endAngle, anticlockwise);

 

2. arcTo()

arcTo() 함수는 주어진 제어점들과 반지름으로 호를 그리고, 이전 점과 직선으로 연결합니다.

 

arcTo(x1, y1, x2, y2, radius);

 

x	호 중심의 수평 좌표입니다.
y	호 중심의 수직 좌표입니다.
radius	호의 반지름입니다.
startAngle	호가 시작점으로, 양의 x축에서 측정됩니다.
endAngle	호가 끝나는점으로, 양의 x축에서 측정됩니다.
anticlockwise	Boolean 값입니다. 기본값은 false (시계 방향)이며, true는 반시계 방향으로 호를 그립니다.

 

**
arc 함수에서 각도는 각이 아닌 라디안 값을 사용합니다. 각도를 라디안으로 바꾸려면 아래의 코드를 사용할 수 있습니다.

radians = (Math.PI/180)*degrees;​

 

 

3. 예제

function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        for (var i = 0; i < 4; i++) {
          for (var j = 0; j < 3; j++) {
            ctx.beginPath();
            var x = 25 + j * 50; // x coordinate
            var y = 25 + i * 50; // y coordinate
            var radius = 20; // Arc radius
            var startAngle = 0; // Starting point on circle
            var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
            var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise

            ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

            if (i > 1) {
              ctx.fill();
            } else {
              ctx.stroke();
            }
          }
        }
      }
    }

 

결과 화면

 

두개의 for문은 루프(일련의 명령문을 일정한 횟수만큼 반복해서 실행하는 것)을 통해 호(arc)들의 행과 열을 읽기 위해 사용되었습니다. beginPath()를 사용해 각 호의 새로운 경로를 만듭니다. 코드 내에서, 각각의 매개변수들을 명확하게 보여주기 위해 변수로 정의 하였지만, 실제로 사용할때 반드시 필요한 것은 아닙니다.

 

x와 y 좌표는 명확하게 표기되어야 합니다. radius와 startAngle은 고정되어 있습니다.

endAngle은 처음 180도(반원)에서 시작하고 이후 매번 90도씩 증가하다가마지막 열에서 완벽한 원을 그립니다.

 

anticlockwise 매개 변수를 지정한 결과로 첫번째와 세번째 줄은 시계방향으로, 두번째와 네번째 줄은 반시계방향으로 원호를 그렸습니다. 마지막으로 if문은 위 반쪽이 윤곽선으로, 아래 반쪽이 색으로 채워진 호들을 만들어냅니다.

 

 

 

 

**참고 사이트 https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial