HTML5 선 그리기와 다각형 그리기
패스
패스는 각 도형들을 이루는 선들의 집합을 의미합니다.
선이나 도형 그리는 순서
① 패스를 초기화 합니다.
② 패스를 지정합니다.
③ 지정한 패스를 그리기 메서드나 채우기 메서드를 사용하여 선이나 도형을 그려줍니다.
④ 지정한 패스를 닫아 줍니다.
⑤ 선을 출력합니다.
패스 관련 메서드
| 메서드 | 설명 |
| beginPath() | 패스 지정을 초기화함 |
| moveTo (x, y) | 시작점을 지정함 |
| lineTo (x, y) | 이전 위치에서 지정한 위치까지 선을 그림 |
| stroke( ) | 선을 출력함 |
| fill( ) | 색을 채우기함 |
| closePath( ) | 패스를 닫아줌 |
선 그리기 실습 프로그램
다각형 그리기 실습 프로그램
'HTML5_CSS_JAVASCRIPT' 카테고리의 다른 글
| HTML5 베지어 곡선 그리기 (0) | 2022.05.26 |
|---|---|
| HTML5 원과 호 그리기 (0) | 2022.05.25 |
| HTML5 canvas 요소와 사각형 그리기 (0) | 2022.05.23 |
| HTML5 폼 속성 (0) | 2022.05.22 |
| HTML5 폼 요소 (0) | 2022.05.21 |
댓글