用canvas画一个加载的圆圈

最新推荐文章于 2021-07-27 08:25:38 发布

作泥

最新推荐文章于 2021-07-27 08:25:38 发布

阅读量369

点赞数 1

分类专栏： js效果

本文链接：https://blog.csdn.net/weixin_37787674/article/details/104043921

版权

js效果专栏收录该内容

52 篇文章 2 订阅

订阅专栏

   <div class="splash" id="splash">
        <div class="loading-circle" id="loadingCircle">
            <p><span id="loadedNum">0</span>%</p>
            <canvas class="mask" id="loadingProgress" width="30" height="30"></canvas>
            <canvas class="bg" width="30" height="30"></canvas>
        </div>
   </div>
    <script>
        var slots={},c=document.getElementById('loadingProgress'),ctx=c.getContext('2d');
        window.hasLoaded = 0;
        window.loading = false;
        window.ulp = ulp;
        function ulp(percent){
            window.loading = true;
            var i = 0, draw = null;
            draw = setInterval(function(){
                if (window.hasLoaded > 100) {
                    window.loading = false;
                    clearInterval(draw);
                    draw = null;
                    return true;
                }
    
                if (i<percent) {
                    d();
                    i++;
                    window.hasLoaded += 1;
                } else {
                    clearInterval(draw);
                    draw = null;
                }
            }, 50);
        }
    
        function d(){
            var lp = document.getElementById('loadedNum');
            lp.innerHTML = window.hasLoaded;
    
            var loaded = window.hasLoaded * 2 / 100 * Math.PI, cw = 30, hcw = 15;
            ctx.clearRect (0,0,cw,cw);
            ctx.beginPath();
            ctx.arc(hcw,hcw,hcw-1, 0, loaded, false);
            ctx.lineWidth = 2;
            ctx.strokeStyle = '#ff6000';
            ctx.stroke();
        }
        ulp(102);
    </script>