canvas

애니메이션

by Kim Ara

HTML

<canvas id="myCanvas" width="300" height="300"> </canvas>

CSS

#myCanvas{border:1px solid #000}

JavaScript

var canvas=$('#myCanvas').get(0);
    var ctx=canvas.getContext('2d');
 
    // 캔버스의 폭을 가져온다.
    var ctxW=canvas.width; 
    // 캔버스의 높이를 가져온다.
    var ctxH=canvas.height;
    // x좌표에 사용할 변수를 선언한다.
    var x = 0;
    // y축으로 움지일 변수 추가한다.
    var y=0;
    
    function animate(){
    	ctx.clearRect(0,0,ctxW, ctxH);
      ctx.fillStyle='red';
      ctx.fillRect(x,10,50,50);
      // 파란색 사각형을 추가한다
      ctx.fillStyle='blue';
      ctx.fillRect(10,y,50,50);
      x++;
      // y좌표를 30ms마다 1씩 더한다.
      y++
      
      // x좌표가 캔버스 폭보다 크면 0으로 만든다.
      if(x > ctxW){
      	x=0;
      }
      // y좌표가 캔버스 높이보다 크면 0으로 만든다.
      if(y > ctxH){
      	y=0;
      }
    
    }
    
    var animateInterval = setInterval(animate, 10);
    // 클릭이벤트
    $("#myCanvas").on('click', function(){
    	// 캔버스 화면을 클릭하면 setInterval함수로 생성된 애니메이션을 삭제하고 움직이던 사각형이 멈춘다.
    	clearInterval(animateInterval);
    });