[html,css] canvas animation (ing)

mdn docs

기본 애니메이션 - Web API | MDN

• 도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션 제작 할 때의 제약일 것.
• 도형을 움직이고자 하면 그 도형이 그러지기 전에 그려진 모든 것을 다시 그려야 함.
• 기본 단계
  1. 캔버스 비우기 - 그리려는 도형이 캔버스를 가득 채우는 것이 아니라면, 이 전에 그려진 모든 도형을 지운다. clearRect() 사용
  2. 캔버스 상태를 저장 - 캔버스 상태에 영향을 주는 (스타일 변경, 모양 변형 등의) 설정값을 바꾸려고 하고, 바뀐 값을 각 장면마다 사용하려고 한다면, 원래 상태를 저장할 필요가 있음
  3. 애니메이션 할 도형 그리기 - 실제 장면을 그리는 단계
  4. 캔버스 상태를 복원 - 새로운 장면을 그리기 전에 저장도니 상태 복원
• 애니메이션 제어하기
  • 코드 실행이 완료되면 캔버스에 나타나는 결과만을 보게 되므로 for 문 같은 반복문 안에서 에니메이션 실행은 불가능.
  • 그래서, 정해진 시간마다 그리기 함수를 실행하는 방법이 필요. 
    1. window.setInterval( func, delay ) - delay마다 함수 반복 실행
    2. window.setTimeout( func, delay) - delay 후 함수 실행
    3. window.requestAnimationFrame()  - 현재 에니메이션 만드는 방법 중 추천 되는 방식
    4. 사용자 상호 작용 변경 - EventListner 설정 (마우스 키보드 ) 
  •  
  •