RequestAnimationFrame.js Demo 

<!DOCTYPE HTML>

<html lang="en">

    <head>

        <title>RequestAnimationFrame.js example</title>

    </head>

    <body>

        <script src="js/RequestAnimationFrame.js"></script>

        <script>



            var canvas, context;



            init();

            animate();



            function init() {



                canvas = document.createElement( 'canvas' );

                canvas.width = 256;

                canvas.height = 256;



                context = canvas.getContext( '2d' );



                document.body.appendChild( canvas );



            }



            function animate() {



                requestAnimationFrame( animate );

                draw();



            }



            function draw() {



                var time = new Date().getTime() * 0.002;

                var x = Math.sin( time ) * 96 + 128;

                var y = Math.cos( time * 0.9 ) * 96 + 128;



                context.fillStyle = 'rgb(245,245,245)';

                context.fillRect( 0, 0, 255, 255 );



                context.fillStyle = 'rgb(255,0,0)';

                context.beginPath();

                context.arc( x, y, 10, 0, Math.PI * 2, true );

                context.closePath();

                context.fill();



            }



        </script>

    </body>

</html>

 

posted @ 2013-05-17 00:25  Harvey-he  阅读(279)  评论(0)    收藏  举报