1_1. <canvas> 기본도형

<canvas>는 javascript를 사용하여 그림(그래프. 사진합성, 애니메이션)을 그리는 html요소이다.

기본적으로  width : 300px / height : 150px 로 지정되어있고 <img>와 같이 초기 해상도를 고려하여 사이즈를 지정해야한다.

 

대체 콘텐츠 

대체 컨텐츠를 제공하는 방법은 <canvas></canvas>태그 안에 대체 컨텐츠를 삽입하는것이다.

<canvas>를 지원하지 않는 브라우저에서는 대체 컨텐츠를 렌더링한다.

태그사이에 대체컨텐츠를 삽입

 

기본 사용법

<canvas>태그의 기본적인 사용법

 

- draw() 함수  ->  문서가 load이벤트를 수신하여 페이지를 로딩할때 실행

- if(canvas.getContext)  ->  getContext() 메소드의 존재여부를 테스트하여 <canvas>를 지원하는 브라우저인지 검사.

- var ctx = canvas.getContext('2d');  -> getContext() 메서드의 렌더링 컨텍스트타입을 '2d'로 지정

 

직사각형 그리기

- fillRect(x, y, width, height) -> 색칠된 사각형을 그림

- strokeRect(x, y, width, height) -> 테두리만 그려진 사각형을 그림

- clearRect(x, y, width, height) -> 특정 부분을 지우는 마스크형 직사각형을 그림

 

3가지 사각형 예시

 

경로 그리기

- beginPath() -> 새로운 경로를 생성

- closePath() -> 마지막 경로와 추가된 직선을 이어준다?

- stroke() -> 윤곽석을 이용하여 도형을 그림

- fill() -> 그려진 도형에 색을 채움

- moveTo(x, y) -> 캔버스가 초기화 되거나 beginPath메소드가 호출 되었을때 펜을 지정된 x, y로 옮김

 

직선(line)

- lineTo(x, y) -> 현재 드로잉 위치에서 x에서 y로 선을 그림.

 

호(arc)

- arc(x, y, r, startAngle, endAngle, anticlockwise) -> 원점 x, y에 반지름 r을 가지고 startAngle -> endAngle짜기 주어진 anticlockwise 방향으로 호를 그림

 

- arcTo(x1, y1, x2, y2, r) -> 주어진 제어점들과 반지름으로 호를 그리고 이전 점과 직선으로 연결

베지어곡선 (Bezier) 및 이차곡선(Quadratic)

- quadraticCurveTo(cp1x, cp1y, x, y) -> 하나의 제어점 + 목표점

- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) -> 2개의 제어점 + 목표점