动画的循环

<!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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容