chapter6. 애니메이션을 만드는 캔버스(Canvas)

section01. 자바스크립트로 Canvas 제어

- HTML5 캔버스의 사용법

· 캔버스는 그래픽을 그릴 수 있는 영역을 말하며, <canvas> 태그와 자바스크립트를 사용해서 웹 페이지 상에서 그래픽을 그린다.

· <canvas> 태그는 단지 그래픽을 그릴 수 있는 영역을 제공하는 컨테이너(그릇)로 실제로 그래픽을 그리기 위해서는

자바스크립트를 사용해야 한다.

· <canvas> 태그는 너비(width)와 높이(height)를 속성으로 가진다.

· 캔버스를 제어하기 위해서는 id 속성도 필요하다.

· 캔버스에 표시할 마우스 포인터의 상대적인 위치를 얻기 위해 특정 구역을 정의하는데 쓰이는 <div> 태그 안에 넣어서 사용하는 것이 좋다.

 

<div id="아이디명">
  <canvas id="캔버스아이디명" width="너비" height="높이"></canvas>
</div>

 

- 캔버스 제어하기

· 만들어진 캔버스에 도형이나 그림 등을 그리거나, 그려진 것들을 움직이게 만드는 등의 제어는 자바스크립트에서 한다.

· 자바스크립트는 HTML 페이지가 모두 로드된 후에 사용되는 것이 좋기 때문에 캔버스를 제어하는 코드$(document).ready()

메소드 안에 기술한다.

· 캔버스 제어 코드가 복잡한 경우 별도의 함수를 따로 정의해서 js 파일로 작성한다.

 

<script>
  $(document).ready(function()){
    // 캔버스 제어 코드 또는 제어 메소드 호출
  });

  function 함수명(){  // 캔버스 제어 메소드
    // 캔버스 제어 코드들
  }
</script>

 

 

· 자바스크립트에서 캔버스를 제어하기 위해 필요한 2가지

1. 그림이 그려질 캔버스 영역

▸ HTML 코드 부분에서 정의한 <canvas> 태그를 자바스크립트에서 제어할 수 있도록 얻어낸다.

(id 속성 값을 사용해서 유일한 태그에 접근)

JS에서 id 속성값을 얻어내기
$(document).ready(function()){
  var cvs = document.getElementDyId("id속성 값")   // 1번 방법
  var cvs = $("id속성 값")[0];                     // 2번 방법, jQuery의 경우도 이 방법을 사용함
});

HTML
<canvas id="id속성 값" width="너비" height="높이"></canvas>

 

​

2. 그리기 작업을 위한 그래픽 2D 콘텍스트 얻어내기

▸ 그리기 작업을 위한 그래픽 2D 콘텍스트를 cvs, getContext("2d");과 같은 방법으로 얻어내서 한다.

 

JS
$(document).ready(function()){
  var cvs = $("id속성 값")[0];        // canvas 엘리먼트 객체가 저장된 객체 변수
  var ctx = cvs.getContext("2d");     // 그래픽 2D 콘텍스트 얻어내기
});

HTML
<canvas id="id속성 값" width="너비" height="높이"></canvas>

 

- 도형, 문자열, 이미지 그리기

▸ 캔버스는 각종 도형, 문자열 그리고 그림을 그릴 수 있는 각종 메서드를 제고한다.

▸ 그리기 메서드들은 [2D 콘텍스트 객체. 그리기 메서드()]와 같은 형태로 사용한다.

 

JS
$(document).ready(function()){
  var cvs = $("id속성 값")[0];        // canvas 엘리먼트 객체가 저장된 객체 변수
  var ctx = cvs.getContext("2d");     // 그래픽 2D 콘텍스트 얻어내기

  ctx.그리기 메서드(인자들);
});

HTML
<canvas id="id속성 값" width="너비" height="높이"></canvas>

section02. 캔버스를 사용한 애니메이션

- 캔버스에서 애니메이션을 구현하는 순서

1. 캔버스 클리어

· 어떤 모양이든 그리기 전에 캔버스를 클리어하는 것이 필요하다.

· clearRect() 메서드를 사용한다.

 

ctx.clearRect(0, 0, 300, 300);

 

 

2. 캔버스 상태 저장

· 어떤 설정을 변경하면 캔버스 상태에 영향을 미치기 때문에 원래 상태를 저장해둬야 한다.

· save() 메서드 사용한다.

 

ctx.save();

 

3. 애니메이션으로 만들 형태 그리기

· 실제로 애니메이션에 필요한 작업들을 캔버스의 그리기 관련 메서드를 사용해서 작업한다.

 

ctx.drawImage(img, x, y, iWidth, iHeight);
 등등...

 

 

4. 캔버스의 상태 재저장

· 새 형태를 더 그려야 할 경우 기존 상태를 재저장 한다.

· restore() 메서드를 사용한다.

 

ctx.restore();

 

​

- 애니메이션 제어

· 애니메이션 동작(실행) 제어함수가 필요하다.

▸ setInterval(function, delay) 메서드 : 특정 시간(delay)마다 지정한 함수(function)을 반복 실행한다.

▸ setTimeout(function, delay) : 지정한 함수(function)를 특정 시간(delay)동안 실행한다.

▸ requestAnimationFrame(callback) : 지정한 함수(calback)을 호출해서 실행한다.