html5 API입문(3) -캔버스 애니메이션-

html5 API입문(3) 

-캔버스 애니메이션-

 

캔버스에서 기본 애니메이팅 패턴은 requestAnimationFrame()내장 매서드를 사용한다. 

 

 function loop( ) {

      requestAnimationFrame( loop )

}

requestAnimationFrame은 초당 60프레임을 찍는다. 따라서 loop함수 내에 draw함수(예시)를 넣어주면, 초당 60장을 계속 draw함수를 그린다는 의미가 된다.

1 『 캔버스 기본설정하기 』 

---

//코드

 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');

---

2 『 애니메이션 루프 설정 』 

---

//코드 

 function loop( ) {

draw( );

requestAnimationFrame( loop );

}

 function draw( ) {

}

 loop( );

 

---

캔버스에서 루프로 애니메이션을 돌리는 기본 뼈대이다. requestAnimationFrame함수는 재귀함수로써 다시 loop함수(상위 함수)를 실행한다. loop함수 안에 있는 함수들이 초당 60프레임으로 애니메이션 된다. 

3 『 box 인스턴스 생성 』 

box 인스턴스 생성해보자. 한 개의 박스가 아닌 여러개의 박스를 생성해야 하므로 원본 객체를 생성하고, 이를 이용할 수 있는 인스턴스를 만든다. 

---

var Box = function( ) {

this.x = 20;

this.y = y=20;

this.width = 80;

this.height = 30;

} 

---

box 변수에 Box 객체를 상속받도록 객체 인스턴스를 미리 준비한다.

  

4 『 forEach구문 』 

forEach구문으로 box를 100개 생성해보자. boxTotal 변수와 box 배열을 추가한다.

---

var boxTotal = 100;

var boxes = [ ]; 

 for( var i = 0; i < boxTotal; i++){

        boxes[ i ] = new Box( ); --> Box 상속받기

}

---

 

5 『draw 함수 생성 』

---

//코드 

function draw ( ){

          ctx.clearRect(0,0,canvas.width,canvas.height)  -> 캔버스 갱신

          boxes.forEach( function( box , i ) { 

                 ctx.fillRect( box.x , box.y , box.width, box.height );

     });

         ctx.fillStyle = 'tomato';

         ctx.fill( );

}

---

6 『update 함수 설정 』 

---

function update ( ) {

    boxes.forEach( function ( box , i ) { 

        box.x += 2;

        box.y += 2;

} )

---

7 『loop함수 설정 』 

---

function loop( ) {

     update( );

     draw( );

     requestAnimationFrame( loop );

    }

 }

loop ( );

---

현재 코드는 아래와 같다.

 

---

function init( ){

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    var Box = function( ){  

           this.x = 20;
           this.y = 30;
           this.width = 80;
           this.height = 30;
    }

 var boxes = [ ];
 var boxTotal = 100;

 for(var i=0; i<boxTotal; i++){

       boxes[i] = new Box();
 }

 function loop( ){
        update( );
        draw( );
        requestAnimationFrame( loop );
 }

function draw( ){

      ctx.clearRect(0,0,canvas.width,canvas.height);
      boxes.forEach(function(box,i){
      ctx.fillRect(box.x,box.y,box.width,box.height);
  })
    ctx.fillStyle = 'tomato';
    ctx.fill();
 }

 function update( ){

    boxes.forEach(function(box,i){
    box.x += 2;
    box.y += 2;
   })
 }

   loop( );

}

---

9 『랜덤함수 생성 』 

box의 x,y값이 랜덤이 되도록 랜덤 함수를 생성한다.

 

---

function randomNum( min, man ){

        return Math.round ( Math.random( ) * (max - min + 1) -min ) ;

}

---

update함수의 box.x , box.y 값에 랜덤으로 생성된 숫자를 넣어준다.

---

function update( ){

    boxes.forEach(function( box , i ){

    box.x += randomNum( -3 , 3 );
    box.y += randomNum( -3 , 3 );

});

---

10 『랜덤 색상함수 생성 』 

-> 색상은 rgba(255,255,255,0.3)함수에 4개의 인자가 들어간다. 

4개의 값에 각각 Random값을 넣어줘야 한다.

---

function randomColor( Rmax, Rmin, Gmax, Gmin, Bmax, Bmin, alpha ) {

colorR = randomNum( Rmax, Rmin );

     colorG = randomNum( Gmax, Gmin );

     colorB = randomNum( Bmax , Bmin );

      return ' rgba( '+colorR+'.'+colorG+','+colorB+','+' )';

}

---

> boxes 배열값에 color를 넣어준다.

 

---

for ( var i = 0;  i<boxTotal; i++) {

          boxes[ i ] = new Box( );

          boxes[ i ].color = randomColor(255,0,255,0,255,0,0.6);

}

---

11 『draw함수, color값 수정 』 

---

function draw ( ){ 

      ctx.clearRect( 0 , 0 , canvas.width , canvas.height );

      boxes.forEach( function(box, i){

            ctx.fillRect( box.x , box.y , box.width, box.height );

            ctx.fillStyle = box.color;            

   });

}

---

12 『전체 코드 』 

---

function init( ){

 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');
 var Box = function( ){

   this.x = 20;
   this.y = 30;
   this.width = 80;
   this.height = 30;
 }

 var boxes = [ ];
 var boxTotal = 100;

 for(var i=0; i<boxTotal; i++) {

  boxes[i] = new Box();
  boxes[i].color = randomColor(255,0,255,0,255,0,0.6);

 }

 function loop( ){
   update( );
   draw( );
   requestAnimationFrame( loop );
 }

 function draw( ){

  ctx.clearRect( 0,0,canvas.width,canvas.height );
  boxes.forEach( function( box, i ){

   ctx.fillStyle = box.color;
   ctx.fillRect( box.x, box.y, box.width, box.height );

})
  ctx.fill ( );
 }

 function update( ){

   boxes.forEach(function( box,i ){

   box.x += randomNum(-3,3);
   box.y += randomNum(-3,3);

  })
 }

 function randomNum(min,max){

  return Math.round(Math.random()*(max-min+1)+min);
 }

 function randomColor(Rmax,Rmin,Gmax,Gmin,Bmax,Bmin,alpha){

  colorR = randomNum(Rmax,Rmin);
  colorG = randomNum(Gmax,Gmin);
  colorB = randomNum(Bmax,Bmin);

  return 'rgba('+colorR+','+colorG+','+colorB+','+alpha+')';
 }

 loop( );

}

---