[[pagelist(html5)]]
[[TableOfContents]]

= 캔버스? = 
 * 그래픽을 자유롭게 그릴 수 있는 영역.
 * 고정된 넓이와 높이.
 * IE를 제외한 모든 주요 브라우저(?)에서 사용할 수 있는 기능. IE에서 사용하고 싶으면 Explorer Canvas, uuCanfas.js 등의 라이브러리를 사용하여 제한적 기능으로 사용할 수 있다.
= 사용 방법 = 
{{{
<canvas></canvas>
}}}
 * canvas위에 그림을 그리려면 Javascript로 그리기 컨텍스트를 생성해야한다.
  * {{{
var canvas = document.getElementById(가져오고 싶은 canvas의 id);
var context = canvax.getContext("2d");
}}}
  * 그리기 컨텍스트는 그래픽을 그리는 데 도움이 되는 메서드를 제공한다.
== 사각형 그리기 ==
 * 윤곽이 있는 사각형을 그릴 수 있다.
 * 색으로 채운 사각형을 그릴 수 있다.
 * 사각형을 지울 수 있다.
== 이미지 삽입 ==
 * img 요소, video 요소, canvas 요소의 DOM 객체를 그릴 수 있다.
  * img 요소의 DOM 객체는 Image 생성자를 사용하여 만들 수도 있다.
  * video 요소의 DOM 객체를 사용할 경우 drawImage()를 호출한 시점에서 재생되는 프레임을 그려준다.
 * 이미지를 원래 크기로 삽입할 수 있다.
 * 이미지의 사이즈를 지정하여 삽입할 수 있다.
 * 원래 이미지에서 일부분을 잘라내어 삽입할 수 있다.
 * (그림 삽입)
== 복잡한 선이나 도형 그리기 ==
 * 패스
  * 캔버스의 API를 이용하여 그려진 선들의 집합.
  * 서브 패스
   * 패스를 구성하는 하나하나의 선.
   * (그림 삽입)
  * 그리기 컨텍스트가 제공하는 API를 이용하여 직선, 베지에 곡선, 원호 등 다양한 패스를 그릴 수 있다.
 * 패스를 그려 그래픽을 표시하는 순서
  1. beginPath()로 그리기 시작.
   * 그 이전에 그렸던 패스는 모두 리셋된다.
  1. 캔버스의 API를 이용하여 패스 그리기.
   * 여기서 그린 패스는 아직 그래픽으로 표시되지 않음.
  1. 그래픽을 화면에 표시.
   * stroke()
    * 패스를 선으로 표현한다. 
    * 선의 스타일은 strokeStyle 속성으로 지정한다.
   * fill()
    * 패스 내부를 채운다.
    * 호출시 패스가 닫히지 않았더라도 자동으로 닫힌 상태로 만든다.
    * 내부 스타일은 fillStyle 속성으로 지정한다.
   * clip()
    * 패스의 내부를 클리핑 영역으로 지정한다.
    * 클리핑 영역이 있는 상태에서 캔버스에 그려지는 그래픽은 클리핑 영역 안쪽에만 표시된다.
    * beginPath()를 호출하여 클리핑 영역을 해제할 수 있다.
    * (그림 삽입)
== 스타일 지정 ==
 * strokeStyle
  * stroke(), strokeRect() 등을 이용하여 그린 선의 색이나 스타일을 지정한다.
 * fillStyle
  * fill(), fillRect() 등을 이용하여 그린 선의 색이나 스타일을 지정한다.
 * 속성에 지정할 수 있는 값
  * CSS Color
   * CSS3의 색 지정 방법을 전부 이용할 수 있다.
   * 아무 것도 지정하지 않으면 #000000(검은색)이 기본 값이 된다.
  * CanvasGradient
   * 선형 그라데이션, 원형 그라데이션을 적용할 수 있다.
  * CanvasPattern
   * img 요소나 video 요소 혹은 다른 캔버스를 사용하여 패턴을 지정할 수 있다.
 * globalAlpha
  * globalAlpha 속성을 이용하여 투명도를 지정할 수 있다.
  * 속성 값은 0.0(완전 투명)부터 1.0(불투명)까지의 값을 지정할 수 있다.
=== 선 스타일 지정 ===
 * 선 스타일
  * 선의 굵기
  * 선의 끝점
   * (그림 삽입)
  * 선들이 교차했을때 생기는 각
   * (그림 삽입)
== 그림자 효과 ==
 * 그리기 컨텍스트가 가진 속성을 지정하여 선이나 도형에 간단하게 그림자 효과를 추가할 수 있다.
== 영역이 겹칠 때의 동작 ==
 * globalCompositeOperation
  * 새로운 도형이 기존 이미지와 겹칠때의 행동을 지정하는 속성이다.
  * 기본 값은 source-over 이다.
  * (그림 삽입)
== 텍스트 삽입 ==
== 그래픽 변형 ==
== 그리기 컨텍스트 상태 저장과 복원 ==
== 픽셀로 그리기 ==
== 이미지를 URL로 얻기 ==
== 애니메이션 ==

 * http://dev.w3.org/html5/canvas-api/canvas-2d-api.html