로딩 무비 썸네일형 리스트형 [그래픽 처리] 애니메이션/setInterval() [1] 공 튀기기 애니메이션 공이 캔버스의 모서리에 도달하면 반대 방향으로 움직이는 애니메이션 입니다. setInterval() 메서드를 이용하여 100일리초(msec)마다 drawBall() 함수를 호출하도록합니다. setInterval(drawBall, 100); 그리고 drawBall() 함수에서 화면을 초기화한 후 공을 렌더링합니다. 렌더링 처리에서는 우선 fillRect() 메서드로 캔버스의 배경을 흰색으로 한 후 arc() 메서드로 빨간 공을 렌더링합니다. 공의 이동은 dir_x/dir_y(공의 이동양과 방향을 지정하는 속성)만큼 공의 좌표를 증가시켜서 구현하는데, 이동 후의 좌표가 캔버스를 벗어날 경우에는 dir_x/dir_y에 '-1'을 곱하여 반대로 이동 시킵니다. ball.x += ba.. 더보기 이전 1 다음
