# canvas 애니메이션 구현 기본 원리
1. HTML 캔버스 생성(html)
<canvas id="myCanvas" width="400" height="300"></canvas>
2. 캔버스 및 그리기 객체 취득(Javascript)
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
3. "애니메이션 함수" 선언
function animate(){ ... 변화를 발생시키는 코드... }
* 캔버스 내의 그림을 다른 위치/색상 등으로 변화시키는 함수 구현
* 기존 그림을 제거하기 위해서는 ctx.clearRect(x좌표, y좌표, 너비, 높이) 함수를 활용
4. "setInterval(콜백함수, 시간ms)"로 애니메이션 함수 반복 호출
setInterval(animate, 30);
* animate 함수가 30ms마다 반복 호출되면서, 새로운 위치/색상으로 그림이 그려진다(애니메이션 효과)
참고) requestAnimationFrame(콜백) 을 재귀적으로 호출하여 애니메이션을 구현할 수도 있다.
* requestAnimationFrame는 브라우저의 백그라운드 상태 등을 고려하여, 콜백함수의 호출 주기/타이밍 등을 관리하는 함수다.
* 구현 방식은 샘플 코드를 참고
* 상세원리 참고 - [JS]requestAnimationFrame/cancelAnimationFrame원리와 사용 방법
# 샘플 예제 코드
: 파란색 사각형이 오른쪽으로 이동하는 애니메이션을 구현한다.
1) setInterval(콜백, ms) 함수를 활용한 코드
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- HTML -->
<!-- 1. canvas 엘리먼트 선언 -->
<canvas id="myCanvas" width="400" height="300" style="border:1px solid black;"></canvas>
<!-- Javascript -->
<script>
// 1. canvas 엘리먼트 취득
const canvas = document.getElementById("myCanvas");
// 2. 그리기객체 취득
const ctx = canvas.getContext("2d");
// 3. 애니메이션 시작점 좌표 설정
let x = 0;
// 4. 애니메이션 함수 선언
function animate(){
// 1) 함수가 실행될 때마다 화면 초기화(canvas의 너비와 높이 만큼 지움)
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 2) 사각형 그리기
ctx.fillStyle = "blue";
ctx.fillRect(x, 130, 100, 100);
// 3) 사각형이 그려질 x좌표 증가
// => 함수가 실행될때마다 x좌표가 1씩 증가한 상태로 사각형이 그려진다.
x++;
}
// 5. 애니메이션 함수를 50ms 간격으로 반복 호출
setInterval(animate, 50);
</script>
</body>
</html>* clearInterval(intervalID) 메서드를 호출하여 반복을 멈출 수 있다.
* intervalID는 setInterval() 호출시 반환한 값을 사용하면 된다.
2) requestAnimationFrame(콜백)을 재귀적으로 호출한 코드
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- HTML -->
<!-- 1. canvas 엘리먼트 선언 -->
<canvas id="myCanvas" width="400" height="300" style="border: 1px solid black;"></canvas>
<!-- Javascript -->
<script>
// 1. canvas 엘리먼트 취득
const canvas = document.getElementById("myCanvas");
// 2. 그리기객체 취득
const ctx = canvas.getContext("2d");
// 3. 애니메이션 시작점 좌표 설정
let x = 0;
// 4. 애니메이션 함수 선언
function animate(){
// 1) 함수가 실행될 때마다 화면 초기화(canvas의 너비와 높이 만큼 지움)
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 2) 사각형 그리기
ctx.fillStyle = "blue";
ctx.fillRect(x, 130, 100, 100);
// 3) 사각형이 그려질 x좌표 증가
// => 함수가 실행될때마다 x좌표가 1씩 증가한 상태로 사각형이 그려진다.
x++;
// 4) *** requestAnimationFrame 함수를 재귀적으로 호출한다.
requestAnimationFrame(animate);
}
// 5. *** requestAnimationFrame로 애니메이션 구현: 재귀적으로 호출된다.
animate();
</script>
</body>
</html>* cancelAnimationFrame(requestID) 메서드를 호출하여 반복을 멈출 수 있다.
* requestID는 requestAnaimationFrame() 호출시 반환한 값을 사용하면 된다.
<결과물>
'개발(Development) > HTML Canvas(캔버스)' 카테고리의 다른 글
| VSCode 캔버스(Canvas), WebGL 자동완성 안됨 해결 방법: @type (0) | 2021.06.14 |
|---|---|
| HTML Canvas(캔버스) 마우스 이동/클릭 좌표 추적 확인 방법 (0) | 2021.06.06 |
| HTML Canvas(캔버스) 텍스트 그리기 방법: fillText, strokeText (0) | 2021.06.04 |
| HTML Canvas(캔버스) 패턴 이미지 채우기 적용 방법: createPattern (0) | 2021.06.04 |
| HTML Canvas(캔버스): 이미지 그리기 방법 drawImage (0) | 2021.06.04 |
댓글