JavaScript canvas 함수(3)

이전 포스팅을 이어서 작성한 내용입니다. 

https://rubbery.tistory.com/53

JavaScript canvas 함수(2)

JavaScript canvas 함수를 이용하여 배경에 토끼이미지가 랜덤으로 나타나도록 만들어보자.

 

 

1. 토끼 이미지를 로딩한다. (애니메이션 표현을 하기위하여 두가지의 이미지를 로딩)

rabbit_1.png

rabbit2.png

 

2. 로딩된 이미지를 배열에 담아 놓는다.

 

 

 

3. 토끼이미지를 로딩할 좌표와 애니메이션 효과를 주기위해 이미지 인덱스와 카운트를 셀 변수를 선언한다.

 

 

 

 

4. serInterval 함수안에 count를 1씩 증가시킨다.

 

 

 

5. setInterval 함수안에 토끼를 그린다.

 

 

 

6. 애니메이션 효과를 주기위하여 토끼 이미지를 1증가 시킨 후 2 가될경우 인덱스값을 0으로 만드는 조건문을 입력한다.

(count를 입력한 이유는 setInterval함수안에 1/100 초마다 한번씩 실행되는 함수로 만들어져서 이미지 로딩되는 시점을 늘리기 위하여 작성하였다)

 

 

 

7. 로딩된 토끼이미지가 랜덤한 canvas 안에 랜덤한 곳에서 나타날수있게하는 코드를 작성한다.

 

 

 

 

 

canvas 영역 내에서 랜덤하게 토끼가 나타나며 움직이는 표현을 볼 수 있다.