HTML5 캔버스(Canvas)는 이미지를 그리거나 완전히 지우는 데 필요한 다양한 메서드를 제공합니다. 여기에 JavaScript를 함께 활용하면 캔버스 위에서 자연스러운 애니메이션 효과를 손쉽게 구현할 수 있습니다.
기본 원리
캔버스 애니메이션의 핵심은 그리기 → 지우기 → 다시 그리기의 반복입니다. 일정한 시간 간격으로 화면을 갱신하면 마치 움직이는 것처럼 보이는 애니메이션이 완성됩니다. 아래 예제에서는 setInterval() 함수를 사용해 100밀리초마다 도형을 다시 그리며, 현재 시간을 기준으로 이미지를 회전시키는 방식으로 애니메이션을 만듭니다.
예제
다음 코드를 실행하면 패턴 이미지가 캔버스 중심을 축으로 계속 회전하는 애니메이션을 확인할 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<script>
var pattern= new Image();
function animate(){
pattern.src = '/html5/images/pattern.jpg';
setInterval(drawShape, 100);
}
function drawShape(){
// DOM을 통해 canvas 요소 가져오기
var canvas = document.getElementById('mycanvas');
// canvas가 지원되지 않는 브라우저에서는 실행하지 않음
if (canvas.getContext){
// getContext를 사용해 캔버스에 그리기
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
var time = new Date();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(pattern,-3.5,-3.5);
ctx.restore();
} else {
alert('이 데모를 보려면 Safari 또는 Firefox 1.5 이상이 필요합니다.');
}
}
</script>
</head>
<body onload="animate();">
<canvas id="mycanvas" width="400" height="400"></canvas>
</body>
</html>코드 설명
- animate() 함수: 페이지가 로드되면 패턴 이미지를 불러오고,
setInterval()을 통해 100밀리초 간격으로drawShape()를 반복 호출합니다. - drawShape() 함수: 캔버스 컨텍스트를 얻은 후,
translate()로 좌표 원점을 캔버스 중앙(150, 150)으로 이동시킵니다. - 회전 처리: 현재 시간의 초와 밀리초 값을 이용해 회전 각도를 계산하고,
rotate()로 이미지를 회전시킵니다. - 상태 저장 및 복원:
save()와restore()를 사용해 매 프레임마다 변환 상태를 초기화하여 잔상 없이 깔끔하게 그립니다.
참고로 최신 브라우저 환경에서는 setInterval() 대신 requestAnimationFrame()을 사용하는 것이 권장됩니다. 이 방식은 화면 재생 빈도에 맞춰 렌더링을 최적화해 더 부드럽고 효율적인 애니메이션을 제공합니다.