TIL-2024.04.23 - Canvas - 005 - Canvas 애니메이션 & 이벤트

 

 

 

질문:

1. Canvas 에서 애니메이션 활용하는 방법

2. Canvas 에서 이벤트 사용하는 방법

 

 

애니메이션: requestAnimationFrame 활용하기, 기본적인 애니메이션 구현

1. requestAnimationFrame 활용하기

- requestAnimationFrame()은 애니메이션을 수행하고자 할 때 다음 리페인트를 실행하기 전에 애니메이션을 업데이트하는 메서드

- requestAnimationFrame()을 사용하면 브라우저의 최적화된 타이밍에 애니메이션을 실행.

 

function animate() {
    // 애니메이션 코드 작성
    // Canvas 요소 업데이트

    requestAnimationFrame(animate); // 다음 프레임 요청
}

// 애니메이션 시작
animate();

 

- animate() 함수 안에 애니메이션을 구현하고 Canvas를 업데이트하는 코드.

- requestAnimationFrame(animate)을 사용하여 다음 프레임을 요청하면서 반복적으로 애니메이션을 실행

 

 

 

2.기본적인 애니메이션 구현

 

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let dx = 2; // 원의 x 방향 이동 거리

function animate() {
    requestAnimationFrame(animate);

    // Canvas 초기화
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 원 그리기
    ctx.beginPath();
    ctx.arc(x, 50, 20, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();

    // x 좌표 업데이트
    x += dx;

    // Canvas 범위를 벗어나면 방향 바꾸기
    if (x > canvas.width - 20 || x < 20) {
        dx *= -1;
    }
}

// 애니메이션 시작
animate();

 

 

 

 

 

- 위 코드에서는 animate() 함수 내에서 원을 그리고 x 좌표를 업데이트하여 움직이는 애니메이션을 구현.

- requestAnimationFrame(animate)을 호출하여 반복적으로 애니메이션을 실행.

- Canvas를 업데이트할 때마다 이전 프레임을 지우고 새로운 프레임을 그리는 방식으로 애니메이션을 구현.

 

 

 

이벤트 처리: 마우스 이벤트 감지, 키보드 이벤트 감지

- Canvas 내에서 이벤트를 감지하려면 addEventListener()를 사용하여 마우스 / 키보드 이벤트를 등록.

 

1. 마우스 이벤트 감지

canvas.addEventListener('mousemove', function(event) {
    const mouseX = event.clientX - canvas.getBoundingClientRect().left;
    const mouseY = event.clientY - canvas.getBoundingClientRect().top;

    // 마우스 위치에 따라 텍스트 그리기
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillText(`Mouse Position: (${mouseX}, ${mouseY})`, 20, 20);
});

 

- 위 코드에서 mousemove 이벤트를 감지하여 마우스의 위치 가져옴.

- clientX와 clientY를 사용하여 마우스 위치를 Canvas 요소의 상대적인 좌표로 변환.

- 그 후 Canvas를 지우고 현재 마우스 위치를 텍스트로 표시

 

 

2. 키보드 이벤트 감지

document.addEventListener('keydown', function(event) {
    const key = event.key;

    // 눌린 키에 따라 동작 수행
    if (key === 'ArrowRight') {
        // 오른쪽 화살표 키를 눌렀을 때 동작
        // 원의 위치 이동 등
    }
});

 

- 위 코드에서 keydown 이벤트를 감지하여 키보드에서 눌린 키를 가져옴.

- 특정 키에 따라 원하는 동작을 수행.

- 예를 들어, 오른쪽 화살표 키가 눌렸을 때 원의 위치를 이동시키거나 다른 애니메이션 동작을 구현.