canvas를 이용하여 마우스 포인터 따라오는 기능 구현 (VanillaJS)

1. HTML 태그 생성

<canvas id="jaka_canvas"></canvas>

2. JavaScript 코드 부분

// 1. 캔버스 요소 가져오기
const jakaCanvas = document.getElementById('jaka_canvas');
const ctx = myCanvas.getContext('2d');

// 2. 캔버스 크기를 브라우저 창 전체로 설정
jakaCanvas.width = window.innerWidth;
jakaCanvas.height = window.innerHeight;

// 3. 마우스 위치를 지정할 객체 (초기값은 중앙)
const mouse = { x: jakaCanvas.width / 2, y: jakaCanvas.height / 2 };

// 4. 원(circle)의 현재 위치와 반지름 정보
const circle = { x: mouse.x, y: mouse.y, radius: 15 };

// 5. 마우스가 움직일 때마다 마우스 좌표를 업데이트
window.addEventListener('mousemove', (e) => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});

// 6. 애니메이션을 실행하는 함수
function animate(){
  // 6-1. 캔버스를 매 프레임마다 꺠끗이 지움
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 6-2. 원(circle)이 마우스를 부드럽게 따라가도록 좌표 업데이트
  circle.x += (mouse.x - circle.x) * 0.1;
  circle.y += (mouse.y - circle.y) * 0.1;
  
  // 6-3. 원 그리기
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
  ctx.fllStyle = 'skyblue'; // 원 색상 설정
  ctx.fill(); // 원 채우기
  
  // 6-4. 다음 프레임 animate 함수를 다시 호출 (무한 반복)
  requestAnimationFrame(animate);
}

// 7. 애니메이션 시작
animate():

 

3. 결과물

 

See the Pen Untitled by 박상철 (@bqoqixdb-the-decoder) on CodePen.

 

위에 코드에서 사용하는 메서드에 대해서 간단히 알아보자.

ctx.beginPath()	새로운 경로를 그릴 것이라고 캔버스에 선언하는 메서드
ctx.arc(x, y, radius, startAngle, endAngle)	호를 그리는 메서드로 5개의 매개변수를 받음 (원을 그릴 수 있음) (x, y, radius, startAngle, endAngle) x : 중심x  y : 중심y radius: 반지름 startAngle : 시작 각도 endAngle : 끝나는 각도 arc(중심x, 중심y, 반지름, 0, Math.PI*2) 를 하면 정확한 원이 나온다. (예제코드 확인)
fillStyle	색상 설정
fill	색 채우기
requestAnimationFrame	브라우저에게 다음 화면을 그릴 준비가 되면 특정 함수를 호출해달라고 요청하는 것 -> 부드럽고 자연스러운 애니메이션을 만들기 위해, 브라우저가 최적의 타이밍에 함수를 설정해주는 메서드 - 브라우저가 "화면 새로 고침"하기 직전에 함수를 실행시켜줌 - 렉 없이 부드럽게 동기화됨 - 필요 없을 땐 자동으로 애니메이션을 멈춰서 CPU 낭비 막아줌

 

오늘은 canvas라는 것에 대해서 여러가지로 알게 되는 하루였다. 나는 다이나믹한 애니메이션을 구현해보고 싶었는데 어떻게 해야할지 갈피를 못 잡았었다. 물론 지금도 그렇다. 다만, canvas라는 태그와 기능을 알기 전/후는 많이 다를 것이라는 생각이 든다.