Canvas 圆形加载进度动画

2017年08月24日作者：井井客整理来源:互联网

圆形加载进度，带动画效果昂。以前我自己也画过一个静态的，感觉还是这个效果好~

Canvas 圆形加载进度动画

原文摘自：http://canvas.migong.org/category/canvas-animation/page/17

代码如下，建议可以看一下原文，里面有解释更多。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Canvas 圆形加载进度动画</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        html {width: 100%; height: 100%;}
        body {width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
        .splash {position: absolute; z-index: 999; display: table; width: 100%; height: 100%; background-color: #f3f0eb;}
        .splash > .splash-inner {display: table-cell; text-align: center; vertical-align: middle;}
        .splash h1,.splash h2,.splash h3 {font-weight: normal;}
        .splash h3 {display: block; margin-top: 34px; font-size: 18px; color: #666; font-weight: lighter;}
        .splash .loading-circle {position: relative; width: 204px; height: 204px; margin: auto;}
        .splash .loading-circle > * {display: block; position: absolute; box-sizing: border-box; border-radius: 102px;}
        .splash .loading-circle > canvas.bg {z-index: 1; width: 100%; height: 100%; border: 8px solid #ddd ;}
        .splash .loading-circle > canvas.mask {z-index: 2; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);}
        .splash .loading-circle > p {z-index: 3;  width: 100%; height: 100%; text-align: center; line-height: 204px; font-size: 56px; font-weight: lighter; color: #999;}
    </style>
</head>
<body>
<div class="splash" id="splash">
    <div class="splash-inner">
        <h1></h1>
        <div class="loading-circle" id="loadingCircle">
            <p><span id="loadedNum">0</span>%</p>
            <canvas class="mask" id="loadingProgress" width="204" height="204"></canvas>
            <canvas class="bg" width="204" height="204"></canvas>
        </div>
    </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(){                      //hasLoaded > 100 结束
            if (window.hasLoaded > 100) {
                window.loading = false;
                clearInterval(draw);
                draw = null;
                return true;
            }

            if (i <= percent) {                             //i < percent 执行 d()，percent被传参67。
                d();
                i++;
                window.hasLoaded += 1;
            } else {
                clearInterval(draw);
                draw = null;
            }
        }, 100);                                            //控制速度
    }

    function d(){
        var lp = document.getElementById('loadedNum');
        lp.innerHTML = window.hasLoaded;                    //加载进度数字插入（loadedNum）
        var loaded = window.hasLoaded * 2 / 100 * Math.PI,  //2*PI是结束角度，/100 是完成的百分比
        cw = 204,
        hcw = 102;
        ctx.clearRect (0,0,cw,cw);                          //清空矩形，宽/高204
        ctx.beginPath();                                    //开始绘制

        //arc创建一个圆形（x,y（x+y是圆的中心点）,r（圆的半径）,起始角度（0），结束角度（loaded），False = 顺时针 & true = 逆时针）
        ctx.arc(hcw,hcw,hcw-4, 0, loaded, false);
        ctx.lineWidth = 8;                                  //线条宽度
        ctx.strokeStyle = '#ff6000';                        //颜色
        ctx.stroke();
    }
    ulp(67);                                                //传参67（百分比）
</script>
</body>
</html>

文章TAG：canvas动画

本文标题：Canvas 圆形加载进度动画
本文链接：http://www.jingjingke.com/c/24296.html

上一篇：Canvas 螺旋线条动画
下一篇：没有了