[Frontend] 애니메이션을 만드는 Canvas

Chapter #6 애니메이션을 만드는 캔버스(Canvas)

Section 1. JS로 Canvas 제어

✴︎ HTML5 캔버스의 사용법

• <canvas> 태그 사용

: 캔버스는 그래픽을 그릴 수 있는 영역 → width와 height을 속성으로 가짐

: 제어하기 위해 id 속성도 필요

<canvas id = "ID" width = "너비" height = "높이"></canvas>

: 특정 구역을 정의 하는데 쓰이는 <div> 태그 안에 넣어서 사용하는 것이 좋음

 

✴︎ 캔버스 제어하기

: JS는 HTML 페이지가 모두 로드된 후에 사용되는 것이 좋기 때문에 캔버스를 제어하는 코드도 $(document).ready() 메소드 안에 기술

<script>
$(document).ready(function(){
	// 캔버스 제어 코드들
});
</script>

: 캔버스 제어 코드가 복잡한 경우 별도의 함수로 따로 정의하여 js 파일로 작성

<script>
$(document).ready(function(){
	drawShape(); // 캔버스 제어 메소드 호출
});
function drawShape(){ // 캔버스 제어 메소드
	// 캔버스 제어 코드들
}
</script>

: 캔버스를 제어하기 위한 2가지 선행 작업

① 그림이 그려질 영역인 캔버스를 얻어내야 함

② 그리기 작업을 위한 그래픽 2D 콘텍스트를 얻어야함

 

✴︎ 도형, 문자열, 이미지 그리기

• 캔버스를 그리기 위해

① canvas 엘리먼트 객체를 얻어내고, 얻어낸 객체의 getContext("2d") 메소드 사용

② 2D 콘텍스트 객체를 얻어내고

③ 그리기 메소드를 사용해서 그리기 작업 가능

$(document).ready(function90{
	var cvs = $("#canvas1")[0];	// 1번
    var ctx = cvs.getContext("2d"); // 2번
    //(10,10)좌표에 가로80, 세로50 크기의 채워진 사각형을 그림
    ctx.fillRect(10,10,80,50); // 3번
});

 

Section 2. 캔버스를 사용한 애니메이션

: 그려진 그림은 고정적으로 그려진 상태를 유지. 움직이게 하고 싶다면 그려진 그림을 지우고 다시 그리는 작업을 함 → 모든 애니메이션 구현 기본 구조

 

✴︎ 캔버스에서 애니메이션을 구현하는 순서

• 캔버스 클리어

: 배경 이미지처럼 전체를 채우는 형태를 그리지 않는 이상, 어떤 모양을 그리든지 그리기 전 필수적으로 캔버스를 클리어 해야함

clearRect(); 메소드 사용

 

• 캔버스 상태 저장

: 설정을 변경하면 캔버스 상태에 영향을 미치기 때문에 원래 상태를 저장해 두어야함

save(); 메소드 사용

 

• 애니메이션으로 만들 형태 그리기

: 실제로 애니메이션에 필요한 작업을 캔버스의 그리기 관련 메소드를 사용해서 함

• 캔버스의 상태 재저장

: 새 형태를 더 그려야할 경우 먼저 기존 상태를 재저장

restore(); 메소드 사용

 

✴︎ 애니메이션 제어

: 메소드를 사용해서 원하는 형태를 그림. 메소드는 직접 사용하거나 사용자 정의함수에서 호출해서 사용

→ 스크립트의 실행이 끝나면 실행된 결과를 확인 가능

: 임의로 애니메이션을 실행 및 제어하기 위해서 특정 시간에 자동 호출되는 애니메이션 동작(실행) 제어함수가 필요.

window.setInterval()
window.setTimeout()
window.requestAnimationFrame()

 

→ setInterval(function, delay)

: 특정 시간(delay) 마다 지정한 함수(function)를 반복 실행

→ setTimeout(function,delay)

: 지정한 함수(function)를 특정 시간(delay) 동안 실행

→ requestAnimationFrame(callback)

: 지정한 함수(callback)를 호출해서 실행