[HTML5] canvas

Canvas 태그 사용

 - html body에서 id가 canvas인 canvas태그를 생성한다.

 - canvas태그내에 글씨를 삽입함으로써, canvas를 지원하지 않는 브라우저에 대해서 대응할수 있도록 한다.

예시 )

<canvas id="canvas" width="600" height="300">

Canvas를 지원하지 않는 브라우저입니다.

</canvas>

드로잉 컨텍스트 생성

 - script에서 getElementById를 사용하여 드로잉 컨텍스트를 생성한다.

예시 )

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

선 / 도형 그리기

 - 아래와 같은 순서로 진행하여 선/ 도형 그리기를 진행한다. 

1. 패스 그리기 시작

 - beginPath();

2. 서브 패스 그리기

2.1 직선을 그리는 메소드 (line)

- moveTo(x, y);

- lineTo(x, y);

2.2 사각형을 그리는 메소드 (rect)

      - rect(x, y, 사각형의 폭, 사각형의 높이 );

2.3 원 또는 원호를 그리는 메소드 (arc)

- arc( x, y, 반지름, 시작각도, 종료각도, 시계/반시계 );

3. 패스 그리기 닫기

 - closePath();

4. 그리기/채우기

 - stroke(); or fill();

사각형 그리기

 - 기본적으로 사각형을 그리기는 함수가 제공되어 있다.

strokeRect ( x, y, 사각형의 폭, 사각형의 높이 );

fillRect (x, y, 사각형의 폭, 사각형의 높이 );

clearRect ( x, y, 사각형의 폭, 사각형의 높이 );

스타일 지정

 - stroke()나 fill()을 호출하기 전에 context에 스타일을 지정한다.

예시 )

context.fillStyle = "red";

context.strokeStyle = "#114255";