HTML - Canvas
캔버스
자바스크립트 코드를 이용해서 웹 브라우저에 그림을 그리는 기능
- 별도의 프로그램 설치없이 사용
- 단순히 그림을 그리는 기능 (합성, 변환, 애니메이션 효과표현 가능)
1단계 : canvas요소를 사용해서 그림이 그려지는 영역 지정 (그림을 담는 컨테이너)
2단계 : 자바스크립트 코드를 사용해소 해당 영역에 그림을 그림
(1) 캔버스의 좌표 시스템 (픽셀의 조합으로 그래픽 표현, bitmap방식 )
캔버스 요소 ( 캔버스 영역을 지정하는 요소)
- 웹페이지에서 그림이 그려지는 투명한 사각영역
- id속성 필수, 기본크기(default) 폭 300px, 높이 500px
<canvas id="아이디" width="폭" height="높이">
이 요소를 지원하지 않는 브라우저에 출력할 내용
</canvas>
(2) 캔버스 객체와 캔버스 컨텍스트 객체생성
-캔버스 객체는 담아두는 기능을 하며, 실제 그림을 그리는 기능은 캔버스 콘텍스트 객체가 시행
(3) 선과 도형그리기
(4) 그림을 그리는 방식
▷호출 즉시 그림을 그리는 방식
관련함수를 호출하면 어떤 단계를 거치지 않고 바로 캔버스에 그림을 그리는 방식
strokeRect(), fillRect(), clearRect(), strokeText(), drawImage()
▷패스(path)를 기반으로 그리는 방식
- 패스 : 각 도형을 이루는 선("서브패스")들의 집합
- 1) 패스초기화 → beginPath()
- 2)다양한 메서드를 사용하여 패스를 지정하고 선/도형을 그림
- 3)지정한 패스를 닫음 closePath()
- 4) 선/도형출력 stroke() 혹은 fill()메서드
(5) 스타일 지정하기
(6) 그라데이션 스타일
(7) 패턴 스타일
(8) 도형 합성
(9)텍스트와 그리기
▷ 관련 메서드
strokeText(텍스트, x,y[,maxWidth])
- 지정된 위치(x,y)를 기준으로 텍스트만 있는 테두리를 그림
- maxWidth → 텍스트가 주어진 크기에 맞게 조정되어 그려짐
fillText(텍스트, x,y[,maxWidth])
- 지정된 위치(x,y)를 기준으로 색이 채워진 텍스트를 그림
변수 ← measureText(텍스트), 변수.width
현재 글꼴에서 주어진 텍스트의 폭을 반환
▷ 관련 속성
font
글자의 스타일, 크기, 글자체 지정 (default: 10px, sans-serif)
textAlign
수평방향의 정렬방식지정 (값 → left, right, center, start, end)
textBaseline
수직방향의 기준선 지정(값 -> top, hanging, middle, alphabet, ideographic, bottom)
(10) 그리기
▷ 관련 메서드
drawImage()메서드
- drawImage(이미지 변수, dx, dy)
원본 이미지를 지정된 위치 (dx, dy)에서 원래 크기대로 삽입
- drawImage(이미지 변수, dx, dy, dw, dh)
원본 이미지를 지정된 위치 (dx, dy)에서 dwxdh 크기대로 삽입
- drawImage(이미지 변수, sx, sy, sw, sh, dx, dy, dw, dh )
원본 이미지를 (sx, sy)위치에서 swxsh크기만큼 잘라내어 캔버스의 지정된 위치 (dx, dy)에서 dwxdh 크기대로 삽입
(11) 도형변환
캔버스의 좌표계의 변환(이동, 회전, 확대/축소)를 통해 캔버스에 그려지는 도형에 대한 변환 효과를 부여
▷ 메서드
이동변환 translate(x,y)
크기변환 scale(x,y)
회전변환 rotate(각도)
사용자정의변환 transform(), setTransform()
** css의 translate, scale, rotate, matrix와 유사(skwe유사기능은 없음)
(12) 사용자 정의변환
