[JavaScript] HTML5 와 Canvas

 . HTML5 와 Canvas

   
    * 웹 페이지 그래픽의 전통적인 방법
        1. 사진이나 그림 <img> 태그 이용
	2. 그래픽은 자바 애플릿이나 플래시 등 플러그인 사용

	=> 문제점이 많다.

   . 캔버스 도입

   - 플러그인의 도움없이 자바스크립트 코드로
     웹 페이지에서 자유롭게 그래픽을 수행할 수 있는 캔버스 기능을 도입

   - 캔버스 기능은 새로 도입된 <canvas> 태그로
     브라우저 화면상에 할당된 공간에서 이루어진다.

   - 캔버스의 그래픽 그리기는 자바스크립트 코드로만 가능하다.


  <canvas> 태그 형식

      <canvas id="캔버스 객체 id"
              style="CSS3 스타일 시트"
	      width="캔버스 영역의 너비"
	      height="캔버스 영역의 높이">

	      이 태그는 지원하지 않는 브라우저가 출력할 HTML 텍스트
      </canvas>

      : width, height : 캔버스가 만들어지는 영역의 크기(픽셀 단위)로
                        생략 가능. 각각 디폴트 300, 150 픽셀

       - 브라우저는 <canvas>태그가 만들어진 영역에 
         사각형의 빈 캔버스 공간을 할당하며,
	 하나의 웹 페이지에 여러 개의 캔버스를 만들 수 있다.

   . 캔버스 그리기의 2가지 허용

    - 첫번째 방법은 beginPath()를 호출하여 빈 경로를 만들고,
      경로(Path)에 먼저 선, 원, 사각형 등의 도형을 모아 놓고 
      한번에 캔버스에 그림을 그리는 방법이다.

    - 두번째 방법은 경로에 담지 않고 바로 캔버스에 그리는 방법이다.

   . 컨텍스트 객체의 메소드

     . beginPath()      이전 경로를 모두 지우고 새로 시작한다.(경로와 관련)
     . closePath()      경로의 끝과 시작점을 연결하는 선을 추가하고 경로를 닫는다. (경로와 관련)
     . moveTo()         경로의 새 점을 만든다. (경로와 관련)
     . lineTo()         경로의 끝 점과 연결하는 선을 추가한다. (경로와 관련)
     . rect()           경로에 사각형을 추가한다.(경로와 관련)
     . arc()            경로에 원호를 추가한다.(경로와 관련)
     . fill()           경로에 만들어진 모든 도형(사각형과 원호)을 외곽선 없이
                        내부만 색으로 채워 캔버스를 그린다. (경로에 있는 도형 캔버스 그리기)
     .stroke()          경로에 담겨 있는 모든 도형을 외곽선만 캔버스에 그린다.(경로에 있는 도형 캔버스 그리기)

     
     . clearRect()     캔버스에서 사각형 영역을 채운다.(캔버스에 바로 그리기)
     . fillRect()      캔버스에 외곽선 없이 사각형 영역을 색으로 바로 칠한다.(캔버스에 바로 그리기)
     . strokeRect()    사각형을 경로에 추가하지 않고 캔버스에 바로 그린다.(캔버스에 바로 그리기)
     . strokeText()    텍스트 (문자열)을 캔버스에 바로 그린다.(캔버스에 바로 그리기)
     . drawImage()     이미지를 캔버스에 바로 그린다.(캔버스에 바로 그리기)