일반 HTML5 강좌 9강 - HTML5 태그 - canvas 다각형

HTML5 강좌 9강 - HTML5 태그 - canvas 다각형

 

이번 강좌에서는 canvas 선그리기를 이용하여 다각형을 만들어보겠습니다.

closePath() 메소드를 이용하여 선이 마지막으로 종료된 지점과 최초의 지점을 연결 할 수 있는데요.

예제를 통해 테스트를 해보죠.

 

 

 

 

 

위 그림을 보면 주석으로 설명을 달았습니다.

먼저 선을 초기화 하고 첫번째 선을 만듭니다.

그리고 첫번째 선을 이어서 두번째 선을 만듭니다.

그리고 context.closePath()를 이용하여 선을 마무리 하는데요.

context.closePath()는 선의 마지막 지점과 첫번째 지점을 연결하는 메소드 입니다.

 

 

 

 

위와 같이 선이 이어져 삼각형을 만들었습니다.

위 방법을 이용하여 다양한 모양의 다각형을 만들 수 있죠.

처음 만들었던 자바스크립트 코드를 /* */ 기호를 이용하여 주석으로 묶고

다른 모양의 다각형을 하나 더 만들어 보겠습니다.

 

 

 

 

 

위와 같이 다른 형태의 자바스크립트 코드를 넣었습니다.

실행을 해볼까요?

 

 

 

 

 

 

5각형이 그려지고 5각형 안에 검은색이 채워졌네요.

물론 색은 원하는 색으로 지정할 수 있습니다.

context.fillStyle 을 이용하여 색을 지정해보고 다시 테스트를 해보겠습니다.

 

 

 

 

 

 

 

지정한 색으로 5각형이 채워지네요.

다양한 모양의 다각형을 테스트 해보세요 :)

 

 

(예제는 첨부파일에서 받을 수 있습니다.)

 

09.zip