캔버스 기본 도형 그리기 - 사각형 외

캔버스에서 사각형을 제외한 삼각형이나 원 같은 도형들은 별도의 메서드를 제공하지 않고 경로 그리기를 이용해 도형을 그립니다. 경로를 이용해 도형을 그릴 경우 다음과 같은 단계를 거칩니다.

 

① beginPath() 메서드를 이용해 경로가 시작됨을 알립니다.

② 직선이든, 호든 원하는 경로를 그립니다. 경로를 그리는 메서드는 캔버스 API에서 제공하고 있습니다. 경로에 따라 사용하는 메서드가 달라지겠죠?

③ closePath() 메서드를 이용해서 경로 시작점부터 끝나는 점까지 선을 그립니다. 이 메서드는 옵션 사항이기 때문에, 도형을 채울 경우에는 이 메서드를 사용하지 않아도 됩니다.

④ stroke() 메서드로 테두리를 그리거나 fill() 메서드로 도형을 채웁니다.

경로를 만들 때 사용하는 메서드

• beginPath(), closePath() : 경로의 시작과 끝을 나타냅니다. 시작 위치와 끝나는 위치가 같게 되면 닫힌 도형이 되기 때문에 따로 closePath()를 붙이지 않을 수 있습니다. 
• moveTo(x, y) : moveTo 메서드는 (x,y) 위치로 시작점을 옮깁니다. 캔버스를 처음 만들면 시작점은 원점 (0, 0)이 됩니다.
• lineTo(x, y) : 시작점에서부터 (x, y) 위치까지 직선 경로를 만듭니다.
• stroke(), fill() : 만들어진 경로를 선으로 그리거나 닫힌 도형일 경우 색으로 치웁니다.

경로를 사용해 삼각형 그리기

삼각형을 그릴 때는 세 개의 경로를 만든 후 선으로 그리거나 채우면 됩니다.

 

 

See the Pen c-triangle by do.it.html5 (@kyrieko) on CodePen.