HTML5 Canvas에서 마우스 오버 시 이미지 확대·축소 구현하기

개요

HTML5 <canvas> 요소 위에서 마우스 오버(mouse over) 시 이미지의 크기가 조절되도록 만들고 싶다면, 별도의 외부 라이브러리 없이 순수 JavaScript(바닐라 JavaScript)만으로 간단하게 구현할 수 있습니다. 핵심 아이디어는 mousemove 이벤트와 mouseout 이벤트를 활용해 캔버스를 다시 그리는 것입니다.

1. 마우스 이동 시 이미지 다시 그리기

마우스가 캔버스 위에서 움직일 때마다 마우스의 현재 좌표를 계산하고, 그 좌표를 기준으로 이미지를 다시 렌더링합니다. 아래 코드에서 getMousePos() 함수는 캔버스 내에서의 마우스 위치를 반환하는 유틸리티 함수입니다.

function move(e) {
    var pos = getMousePos(myCanvas, e);
    context.drawImage(img, -pos.x, -pos.y, img.width, img.height);
}

drawImage()의 두 번째, 세 번째 인자에 -pos.x, -pos.y를 전달함으로써, 마우스가 가리키는 지점이 이미지의 해당 위치와 일치하도록 이미지를 이동시켜 그립니다.

2. 캔버스에 이벤트 리스너 등록하기

다음으로, 캔버스 요소에 필요한 이벤트 리스너를 등록합니다. 마우스가 캔버스 안으로 들어와 움직일 때는 move 함수가, 캔버스 밖으로 벗어날 때는 display 함수가 호출되도록 설정합니다.

// 필요한 이벤트 리스너 추가
myCanvas.addEventListener('mouseout', display, false);
myCanvas.addEventListener('mousemove', move, false);

3. 마우스가 벗어났을 때 축소된 이미지 표시하기

마우스가 캔버스를 벗어나면 display() 함수가 실행되어 이미지를 절반 크기로 축소하여 다시 그립니다.

function display() {
    context.drawImage(img, 0, 0, img.width>>1, img.height>>1);
}

여기서 비트 연산자 >>1(오른쪽 시프트)는 값을 2로 나눈 것과 같은 효과를 냅니다. 즉, img.width>>1은 이미지 너비의 절반이 되므로, 원본 이미지가 50% 축소된 상태로 화면에 나타납니다. 이 방식은 곱셈·나눗셈보다 빠르게 처리되는 장점이 있습니다.

정리

이처럼 mousemove 이벤트에서 마우스 좌표에 맞춰 이미지를 이동시켜 그리고, mouseout 이벤트에서 축소된 이미지를 렌더링하면, 마우스 오버 반응형 이미지 확대·축소 효과를 손쉽게 구현할 수 있습니다. 필요에 따라 배율을 조절하거나 CSS 전환 효과를 조합해 더 부드러운 애니메이션을 만들 수도 있습니다.