자바스크립트로 애니메이션 구현 및 2D 성능 측정

안녕하세요. 이번 시간에는 자바스크립트를 활용하여 현재 보고 있는 웹브라우저 화면에 각각 독립적으로 움직이는 공 애니메이션 효과를 만들 거예요. 공을 그리기 위해 HTML5의 기능 중 하나인 Canvas를 사용할 건데요. Canvas는 동적인 그래픽을 그리기 위해 사용됩니다. 즉 2D 그래픽이나 애니메이션 효과를 웹 페이지에 하나도 안 쉽게 표현할 수 있어요. 웹브라우저에서 굴러다니는 공으로 대략적인 2D 그래픽 성능도 확인해 볼 수 있는데요. 시간이 지남에 따라 공의 개수가 많아지도록 해서 실시간으로 프레임을 측정하고 공이 최대 몇 개까지 안정적인 프레임을 유지하는지 확인해 보는 거죠! canvas는 그래픽카드의 하드웨어 가속을 사용하여 2D 그래픽을 렌더링 하기 때문에 가능한 거예요. 하지만 성능 테..