2.4 Canvas 애니메이션

Canvas는 2D 그래픽을 그린 후 다양한 형태의 애니메이션을 만들 수 있습니다. Canvas 애니메이션을 사용하면 복잡하고 화려한 효과 및 사용자 입력(마우스, 터치 등)에 반응하여 상호작용이 가능한 웹 페이지를 구현할 수 있습니다. Canvas는 기본적으로 <canvas> 위에 그려진 그림이기에 querySelector()와 같은 DOM 선택자로 요소를 선택하여 직접적으로 조작할 수 없습니다. 그렇기에 Canvas에서 애니메이션 구현은 <canvas>위에 연속되는 그림을 여러 장 그리고 이어 붙이고 이전의 그림을 삭제하여 애니메이션 효과를 내는 방식입니다.

2.4.1 애니메이션 사용하기

다음과 같은 방식으로 캔버스에 한 장면을 그려낼 수 있습니다.

  1. Canvas 비우기: clearRect() 와 같은 메서드를 사용하여 <canvas>를 지우고 빈 캔버스를 만듭니다.
  2. Canvas에 도형 그리기: 원, 사각형, 선 등의 도형을 <canvas>에 그립니다.
  3. 도형 속성 업데이트: 애니메이션 프레임마다 도형의 속성을 업데이트합니다. 도형의 위치, 크기, 회전 등을 애니메이션 프레임마다 업데이트할 수 있습니다. 이를 통해 도형이 움직이거나 변형하는 효과를 구현할 수 있습니다.
  4. 이전 프레임 지우기: <canvas>를 지우고 업데이트된 도형을 다시 그립니다. 이를 통해 프레임마다 <canvas>가 업데이트되어 도형이 움직이는 효과를 만들 수 있습니다.
  5. 애니메이션 프레임 반복: requestAnimationFrame()을 사용해 애니메이션 프레임을 반복하면서 도형 애니메이션을 계속해서 업데이트하고 그립니다. 이를 통해 부드러운 애니메이션 효과를 구현할 수 있습니다.

1. 이동하는 사각형 만들기

캔버스 애니메이션의 이해를 위해 간단한 애니메이션을 구현해 보겠습니다. 아래 예제는 기본 사각형을 그리고 지운 후 오른쪽 아래로 이동하는 사각형 애니메이션입니다.

  1. 도형 그리기

시작 위치 (10,10) 에서 너비 100px, 높이 100px, ‘#F0645C’ 색상인 사각형을 그립니다.

그림 2-4-1

그림 2-4-1

const canvas = document.querySelector('.canvas');
const ctx = canvas.getContext('2d');
        
ctx.fillStyle = '#F0645C';
ctx.fillRect(10,10, 100, 100);
  1. 기존 도형 지우기