动画的循环

作者: 洛洛kkkkkk | 来源:发表于2017-04-20 19:30 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #kk{
                box-shadow: 0 0 10px 0 sandybrown;
            }
        </style>
    </head>
    <body>
        <canvas id="kk" width="600" height="600"></canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById("kk");
        var context = myCanvas.getContext("2d");
        
        var num = 0 ;
//      setInterval(function () {
//          num++;
//          console.log(num);
//      },30)
        //fps = 1000/30
        //每隔30MS必须执行下一次，不管上一次是否执行完成
        //不在浏览时，FPS会变缓
        
        
        //递归函数：函数里面调用自己
//      function animate () {
//          num++;
//          console.log(num);
//          if(num>1000){
//              return;
//          }
//          setTimeout(animate,30);
//      }
//      animate();

        function animate () {
            num++;
            console.log(num);
            if(num>1000){
                return;
            }
            window.requestAnimationFrame(animate);
        }
        animate();
        //切换到别的，循环停止
        
        
    </script>
</html>