[쉽게 배우는 H.C.J] Chapter 6 - Canvas

SECTION 02 캔버스를 사용한 애니메이션

 

<canvas>와 상호작용하는 애니메이션도 자바스크립트를 사용해서 쉽게 만들 수 있음.

 

[캔버스에 애니메이션 구현하기 순서]

1. 캔버스 클리어 : ClearRect()

어떤 모양을 그리든지 그리기 전 캔버스 클리어 필요

 

2. 캔버스 저장 : save()

 

3. 애니메이션으로 만들 형태 그리기 : 애니메이션에 필요한 작업을 메서드로 그림

: drawImage() 등등..

 

4. 캔버스 상태 재저장 : 새 형태를 그리기 전 기존 상태 저장. restore()

---

5. 애니메이션 제어 : 메서드를 사용해서 원하는 형태 그리기.

: window.setInterval(), window.setTimeout(), window.requestAnimationFrame() 과 같은 애니메이션 동작(실행) 제어함수 사용

 

1) setInterval(function, delay) 메서드

: 특정 시간(delay)마다 지정한 함수(function)를 반복 실행

 

2) setTimeout(function, delay) 메서드

: 지정한 함수(function)를 특정 시간(delay)마다 실행

 

3) requestAnimationFrame(callback) 메서드

: 지정한 함수(callback)를 호출해서 실행