[Canvas] canvas 7. path도형 그리기 - 직선

직선

직선을 그리기 위해서는 lineTo 메소드를 사용합니다.




lineTo(x, y)




이 메소드는 x,y 두가지 인자를 포함하는데. 이 좌표는 직선의 끝점을 나타냅니다.

현재 위치로부터 x,y 좌표까지의 직선을 그려주는 겁니다.

시작점을 바꾸기 위해서는 앞서 살펴보았던 moveTo 메소드를 이용하면 됩니다.

1. // Filled triangle  
2. ctx.beginPath();  
3. ctx.moveTo(25,25);  
4. ctx.lineTo(105,25);  
5. ctx.lineTo(25,105);  
6. ctx.fill();  
7.   
8. // Stroked triangle  
9. ctx.beginPath();  
10. ctx.moveTo(125,125);  
11. ctx.lineTo(125,45);  
12. ctx.lineTo(45,125);  
13. ctx.closePath();  
14. ctx.stroke();  

위의 코드를 살펴보면 두개의 삼각형을 그리는 path도형인데요.

첫번째는 내부가 꽉찬 삼각형, 두번째는 내부가 비어있는 삼각형을 그리도록 되어있습니다.

주의할점은 라인을 2개만 사용하여 삼각형을 그렸다는건데요 앞서 살펴보았던 fill 메소드의 특성상

closePath메소드를 사용하지 않아도 자동적으로 도형을 완성시켜줍니다.

시작점과 마지막까지 그린점을 직선으로 이어주어 두개의 선으로 완전한 하나의 도형을 완성시켜주는셈입니다

[사진출처]모질라 캔바스 튜토리얼

물론 라인을 두개만 사용하지않고 끝까지 그려서 완성시켜주셔도 무방합니다.