[Canvas] canvas 6. path도형 그리기

path도형을 그리기 위해서 우리는 몇가지 단계가 필요합니다.

beginPath()
closePath()
stroke()
fill()

path도형을 그리기 위한 첫번째 단계로는 beginPath 메소드를 부르는것입니다.

내부적으로 path도형은 라인,원 등으로 구성된 하위 paths의 목록으로 구성됩니다.

이 메쏘드가 호출될때마다 목록은 초기화 되고 새로운 도형그리기를 시작할수가 있습니다.

두번째단계는 실제로 경로를 지정하는 함수를 호출합니다.

세번째 단계는 선택적인 단계인데 , closePath함수를 호출하는것입니다.

이 함수는 현재 상태에서 직선거리로 도형을 완성하려 할것입니다.

만약 도형이 이미 완성되어있거나 리스트에 한점밖에 그리지 않았다면

이 함수는 아무것도 동작하지 않습니다.

마지막단계는 stroke또는 fill 메소드를 부르는 겁니다.

둘중 한 메소드를 사용하게되면 실제 캔버스에 도형을 그리게 됩니다. 

stroke 는 도형의 아웃라인을 그리는데 사용 하고 fill 은 도형은 한가지 색으로 채우는데 

사용됩니다.

note : fill메소드를 사용하게되면 closePath메소드를 사용하지 않았더라도 도형이 완성됩니다.

간단히 삼각형을 그리기 위해서는 다음과같은 순서를 사용하면 됩니다.

ctx.beginPath();  

ctx.moveTo(75,50);  

ctx.lineTo(100,75);  

ctx.lineTo(100,25);  

ctx.fill(); 

moveTo

매우 유용한 함수중에 하나인 moveTo 함수는 사실 아무것도 그리지 않는 함수입니다.

하지만 이 함수는 리스트에서 도형을 그리는 위치를 옮겨주는 기능을 가지고있기에

매우 중요합니다.

이 함수는 두가지 인수를 받아 사용하는데 새로운 그림 시작 좌표를 x,y로 받습니다.

beginPath 메쏘드가 불려지거나 캔버스가 초기화 되었을때 시작점은 좌표 0,0로 셋팅됩니다.

대부분의 경우 moveTo 함수는 시작점을 어딘가 다른곳으로 옮길때 사용되며.

도형과 연결되지않은 임의의 점으로도 이동이 가능합니다.

아래의 이미지를 보시면 스마일을 그릴때 moveTo 함수로 이동하는 부분을 붉은라인으로

표시하였습니다.

[출처] 모질라 디벨로퍼 센터

미리보기

1. ctx.beginPath();  
2. ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle  
3. ctx.moveTo(110,75);  
4. ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)  
5. ctx.moveTo(65,65);  
6. ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye  
7. ctx.moveTo(95,65);  
8. ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye  
9. ctx.stroke();