HTML5 - [10] Canvas : 캔버스를 생성하고 사각형, 선, 그리고 다각형을 그리는 방법

HTML5 - [10] Canvas : 캔버스를 생성하고 사각형, 선, 그리고 다각형을 그리는 방법

정리하기

(1) 캔버스 기본 내용

그림 영역 지정

• <canvas id="아이디" width="폭" height="너비">
• 캔버스 미지원시 대체 텍스트나 이미지 표시
• </canvas>

• width/height 생략 시 기본 값: 폭 300px, 높이 150px

캔버스 컨텍스트 생성

• 방법1:
• var 변수1 = document.getElementById("캔버스 아이디");
• var 변수2 = 변수1.getContext("2d");
• 방법2:
• var 변수 = document.getElementById("캔버스 아이디").getContext("2d");

캔버스 상태의 저장과 복원 → save(), restore()

(2) 사각형 그리기

사각형 그리기

메서드	설명
fillRect(x,y,w,h)	색이 채워진 사각형 영역을 그린다.
strokeRect(x,y,w,h)	테두리만 있는 사각형 영역을 그린다.
clearRect(x,y,w,h)	지정한 사각형 영역을 지운다.

(3) 선 그리기

패스 관련 메서드

패스 관련 메서드

메서드	설명
beginPath()	이전까지 그렸던 패스를 모두 초기화하고 새로운 패스를 그린다.
closePath()	현재 패스를 닫는다.
lineTo(x,y)	이전 위치에서의 점과 현재 주어진 점을 추가하여 선을 그린다.
moveTo(x,y)	주어진 점을 시작하는 새로운 서브패스를 만든다.
stroke()	현재 패스 또는 주어진 패스의 서브패스를 현재의 선 스타일로 그린다.
fill()	현재 패스 또는 주어진 패스의 서브패스를 현재의 채우기 스타일로 채운다.
rect(x,y)	사각형을 그린다.

선을 그리기 위한 메서드의 활용

• 시작점 지정 moveTo(x,y) → 종료점 지정 lineTo(x,y) → 선의 출력 stroke()

(4) 다각형 그리기

선 그리기 메서드와 더불어 closePath() 사용

• closePath() → 선이 마지막으로 종료된 지점과 최초의 지점을 자동으로 연결시킴

정다각형을 그리는 알고리즘(n: 면의 수, r: 원의 반지름)

• 원의 중심으로부터 정다각형의 각 측면에 의한 각도(360/n)를 계산
• 첫 번째 꼭지점의 위치를 (r, 0)으로 지정
• 면의 수만큼 루프를 통해서 꼭지점이 위치하는 각도를 계산하고, 각 꼭지점들끼리의 드로잉을 수행

(5) 점선 그리기

setLineDash() → 현재 점선의 패턴을 설정

getLineDash() → 현재 점선의 패턴을 반환

lineDashOffset → 점선 모양의 패턴과 동일한 단위에서의 위상 오프셋을 지정

(6) 선 스타일

선 스타일

속성	설명
strokeStyle	선의 색상 지정
lineWidth	선의 두께 지정
lineJoin	선의 연결 부분의 스타일 지정 (bevel | round | miter)
lineCap	선의 끝 부분의 스타일 지정 (butt | round | square)

miterLimit → 선의 연결 부분의 스타일이 miter인 경우 miter의 한계 비율을 지정