캔버스를 이용한 애니메이션 HTML5



캔버스를 이용한 애니메이션

 

 

이번에 배워볼 내용은 캔버스에 그림을 계속적으로 그려줌으로써, 애니메이션 효과를 내는 방법에 대해 알아본다.

내용은 간단하며, 하나를 그리면 이전에 그린 내용을 지워준다는 것이다.

 

이때 특정시간마다 반복되는 효과setTimeout()이나 setInterval()을 이용한다.

예제를 보며 이해해보자.

 

 <HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
<CANVAS id="canvas1" height="300" width="300"></CANVAS>
<br/>
seconds : <input type="text" id="temp1"/>
<br/>
angle : <input type="text" id="temp2"/>

<SCRIPT type="text/javascript">
 var canvas = document.getElementById("canvas1");
 var context = canvas.getContext("2d");
 var centerX = 150;
 var centerY = 150;

 

 setInterval(function(){
  //캔버스 지우기
  canvas.width = canvas.width;
  context.beginPath();
  
  //바깥쪽 원을 그림
  context.arc(centerX, centerY, 100, 0, 2 * Math.PI, true);

 

  //시계중심좌표를 중심으로 초침을 그릴 수 있도록 설정
  context.translate(centerX, centerY);

 

  //초침의 회전
  var seconds = new Date().getSeconds();
  document.getElementById("temp1").value = seconds;

 

  var angle = 360 / 60 * seconds * Math.PI / 180;
  document.getElementById("temp2").value = angle;


  context.rotate(angle);

 

  //(0, 0)을 시작점으로 초침을 그림
  context.moveTo(0, 0);
  context.lineTo(0, 0 - 80);

 

  //선을 그림으로써 화면에 출력한다.
  
context.stroke();
 }, 500);
 
</SCRIPT>
</BODY>
</HTML>

 

위의 예제에서는 setInterval() 메서드를 이용하여, 500ms 동안 익명메서드의 내용이 반복되도록 설정하였다.

익명메서드의 내용은 주석의 내용과 같으며, 임의로 텍스트박스 두개를 만들어서 현재 초와 각도값을 출력하였다.

약간의 깜박임이 있지만, 효과 설정을 좀 더 제대로 한다면 해결할 수 있을지도 모르겟다.

 

이걸로 시계만들어 볼사람 퓨쳐핸섭!!!!

아래는 결과화면이다.

 


덧글

댓글 입력 영역


통계 위젯 (화이트)

216
122
358609

red 210