[Canvas] canvas 8. path도형 그리기 - 원,호

원이나 호를 그리기 위해서는 arc 메소드가 사용됩니다.  사파리와 파이어폭스에서 지원하는

arcTo 메소드 역시 설명에 포함되지만, 이전 버젼에서는 지원하질 않습니다.

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

이 메소드는 다섯가지 파라메터를 가지고 있는데 x와 y는 원의 중심좌표를 나타내고

radius 는 말그대로 반지름이고 startAngle과 endAngle은 호의 시작과 끝을 나타내는

포인트입니다. 

호의 시작과 끝을 나타내는 각도는 x축을 기준으로 계산되어 지고있습니다. (x축이 0도라는말)

anticlockwise 은 방향을 나타내는데요 true 일경우 시계방향으로 false일경우 

반대방향입니다.

NOTE:

 여기에서 라디안을 설명하지 않고 넘어갈수가 없는데요. 보통 수학시간에 배우는 rad로

를 떠올리시면 될듯한데요. 호도법이라고도 합니다.  arc 메소드는 각도가 아니라 

라디안으로 호의 크기를 계산합니다.

라디안은 원의 반지름과 같은 길이를 갖는 호(弧)가 이루는 각을 말합니다. 

원주는 2π×반지름과 같습니다 그러므로 1라디안=360/(2π)＝180/π＝약 57.2958이되는거죠

반대로 도수×π/180＝라디안 수가 됩니다. 즉 360도＝2π라디안 입니다.

그럼 예제를 보면서 이해해 보도록 하겠습니다.

1. for(var i=0;i<4;i++){  
2.   for(var j=0;j<3;j++){  
3.     ctx.beginPath();  
4.     var x              = 25+j*50;               // x coordinate  
5.     var y              = 25+i*50;               // y coordinate  
6.     var radius         = 20;                    // Arc radius  
7.     var startAngle     = 0;                     // Starting point on circle  
8.     var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle  
9.     var anticlockwise  = i%2==0 ? false : true; // clockwise or anticlockwise  
10.   
11.     ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);  
12.   
13.     if (i>1){  
14.       ctx.fill();  
15.     } else {  
16.       ctx.stroke();  
17.     }  
18.   }  
19. }  

예제 보기 

예제를 보시면 12개의 서로다른모양의 도형들이 있습니다. 크게 속이 꽉찬 도형과 속이 빈 도형으로 

나눌수 있는데요. 이것은 코드 마지막쯤에서 분기해준 fill메소드로 그려주냐 stroke 메소드로 

그려주느냐에따라  결정되는 부분이고 쉽게 이해되리라 생각됩니다.

각각의 fill과 strike메소드로 그려진 호들은 역시 위아래로 각각 두줄씩인데요.

anticlockwise 변수의 종류에 따라 달라지는 모습을 보기 위해서 입니다. 

그려주는 방향이 다르기때문에 라디안이 같더라도 모양은 반대로 그려지게 되지요.

그리고 각각의 도형들은 루프문에따라 파이를 곱해서 라디안을 결정하도록 했습니다.

라디안의 사용법에대해서는 고등수학에서 나왔던가? 했던거같으니 잘 모르는 분은 공부하시면 되겠습니다

그리 어렵지 않습니다.