Canvas Basic Animation

Canvas Basic Animation

 

• Canvas 기본 애니메이션 단계
  1. 캔버스를 비운다.
  2. 캔버스 상태를 저장한다.
  3. 애니메이션 할 도형을 드로잉 한다.
  4. 캔버스 상태를 복원한다.
• requestAnimationFrame()
  - 브라우저에게 수행하기를 원하는 애니메이션을 알리고 해당 애니메이션을 업데이트하는 자바스크립트 함수
  - 시간 값을 인자로 받을 수 있고, 모니터 주사율에 맞춰서 애니메이션을 실행해주기 때문에 최근 애니메이션에 가장 많이 사용하는 함수이다.
  - setTimeout
    : 일정 시간이 지나면 해당 함수를 실행, 재귀 호출을 사용해서 반복
  - setInterval
    : 일정 시간마다 해당 함수를 실행
  - requestAnimation
    : 브라우저에게 애니메이션을 실행하도록 요청. 재귀 호출을 사용해서 반복
  

  const canvas57 = document.getElementById('canvas57');
  const ctx57 = canvas57.getContext('2d');
  let x57 = 0; let y57 = 0;
  ctx57.fillStyle = gra2;
  
  requestAnimationFrame(moveRect);
  
  function moveRect(){
      ctx57.clearRect(0,0,canvas57.width,canvas57.height);
      ctx57.fillRect(x57+80,y57,50+x57,50+x57);
      x57++;y57++;
      if(y57>=canvas57.height){
          x57=0;y57=0;
      }
      requestAnimationFrame(moveRect);
  }​