[JS] Canvas로 애니메이션 구현하기

HTML5 Canvas API Crash Course

예제1: Bounce

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const circle = {
  x: 200,
  y: 200,
  size: 30,
  dx: 5,
  dy: 4,
};

const drawCircle = () => {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, 30, 0, Math.PI * 2);
  ctx.fillStyle = 'coral';
  ctx.fill();
};

const update = () => {
  // (*) Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  
  drawCircle();

  // Change position
  circle.x += circle.dx;
  circle.y += circle.dy;

  // Detect side walls
  if (circle.x + circle.size > canvas.width || circle.x - circle.size < 0) {
    circle.dx *= -1;
  }

  // Detect top and bottom walls
  if (circle.y + circle.size > canvas.height || circle.y - circle.size < 0) {
    circle.dy *= -1;
  }

  // Repaint canvas
  requestAnimationFrame(update); // (*)
};

update();

예제2: Moving a character by keyboard

이미지에 애니메이션을 주고 싶다면, ctx.drawImage(img, x, y, width, height)을 사용 한다.

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const img = document.getElementById('source');
const player = {
  w: 50,
  h: 70,
  x: 20,
  y: 200,
  speed: 10,
  dx: 0,
  dy: 0,
};

const clear = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
};

const drawPlayer = () => {
  ctx.drawImage(img, player.x, player.y, player.w, player.h); // (*)
};

const detectWalls = () => {
  // Left wall
  if (player.x < 0) {
    player.x = 0;
  }
  // Right Wall
  if (player.x + player.w > canvas.width) {
    player.x = canvas.width - player.w;
  }
  // Top wall
  if (player.y < 0) {
    player.y = 0;
  }
  // Bottom Wall
  if (player.y + player.h > canvas.height) {
    player.y = canvas.height - player.h;
  }
};

const newPos = () => {
  player.x += player.dx;
  player.y += player.dy;
  detectWalls();
};

const update = () => {
  clear();
  drawPlayer();
  newPos();
  requestAnimationFrame(update);
};

const moveRight = () => (player.dx = player.speed);
const moveLeft = () => (player.dx = -player.speed);
const moveUp = () => (player.dy = -player.speed);
const moveDown = () => (player.dy = player.speed);

const keyDown = e => {
  if (e.key === 'ArrowRight' || e.key === 'Right') {
    moveRight();
  } else if (e.key === 'ArrowLeft' || e.key === 'Left') {
    moveLeft();
  } else if (e.key === 'ArrowUp' || e.key === 'Up') {
    moveUp();
  } else if (e.key === 'ArrowDown' || e.key === 'Down') {
    moveDown();
  }
};

const keyUp = e => {
  if (
    e.key === 'ArrowRight' ||
    e.key === 'Right' ||
    e.key === 'ArrowLeft' ||
    e.key === 'Left' ||
    e.key === 'ArrowUp' ||
    e.key === 'Up' ||
    e.key === 'ArrowDown' ||
    e.key === 'Down'
  ) {
    player.dx = 0;
    player.dy = 0;
  }
};

update();
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);