[HTML 요약정리] 06-2. 캔버스를 사용한 애니메이션

 

 

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

 

• 캔버스 클리어
  배경 이미지처럼 캔버스 전체를 채우는 형태를 그리지 않는 한,
  어떤 모양을 그리든지 그리기 전에 캔버스를 클리어하는 것이 필요하다
  이 작업은 clearRect() 메소드를 사용한다

// 캔버스 클리어 예시
ctx.clearRect(0,0,300,300);

 

• 캔버스 상태 저장
  어떤 설정을 변경하면 캔버스상태에 영향을 미치기 때문에 원래 상태를 저장해 두어야만 한다
  이작업은 save() 메소드를 사용한다

// 캔버스 상태 저장 예시
ctx.save();

 

• 애니메이션으로 만들 형태 그리기
  여기서는 실제로 애니메이션에 필요한 작업을 캔버스의 그리기 관련 메소드를 사용해서 한다

// 애니메이션으로 만들 형태 그리기 예시
생략..
ctx.drawImage(img,x,y,iWidth,iHeight);
생략..

 

• 캔버스의 상태 재저장
  새 형태를 더 그려야할 경우 먼저 기존 상태를 재저장한다
  이 작업은 restore() 메소드를 사용한다

// 캔버스 상태 재저장 예시
ctx.restore();

 

2. 애니메이션 제어

 

캔버스에 메소드를 사용해서 원하는 형태를 그린다

 

• setInterval(function, delay) 메소드
  특정 시간(delay) 마다 지정한 함수(function)를 반복 실행한다

setInterval(draw,50); // 0.05초 마다 draw() 함수를 실행

 

• setTimeout(function, delay) 메소드
  지정한 함수(function)를 특정 시간(delay)동안 실행한다

window.setTimeout(displayAlert,1000); // displayAlert() 함수를 1초 동안 실행

 

• requestAnimationFrame(callback) 메소드
  지정한 함수(callback)를 호출해서 실행한다

window.requestAnimationFrame(draw); // draw() 함수 호출

 

 

2024.09.02