html5 canvas實現圓形進度

時間 2019-12-07
原文原文鏈接
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=0">
    <title>圓形進度</title>
    <style>

        body {
            position:absolute;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            background:#FFF;
            width:100%; 
            height:100%;
        }

        #progress{
            position:absolute;
            top:10px;
            right:10px;
            width:100px;
            height:100px;
            display:-webkit-box;
            -webkit-box-pack:center;
              -webkit-box-align:center;
            -webkit-box-orient: vertical;
            display:none;
        }
        
        #txt{
            width:100px;
            height:100px;
            position:absolute;
            top:0;
            left:0;
            display:-webkit-box;
            -webkit-box-pack:center;
              -webkit-box-align:center;
            -webkit-box-orient: vertical;
        }

        .bttn {
            background-color: #EEEEEE;
            border-color: #CCCCCC #CCCCCC #BBBBBB;
            -webkit-border-radius: 4px;
            border-style: solid;
            border-width: 1px;
            color: #333333;
            font: bold 18px;
            padding: 8px 0;
            text-align: center;
            text-shadow: 0 1px 0 #EEEEEE;
            width: 120px;
            margin-top:15px;
        }
    </style>
    <script type="text/javascript">
        
        var tid = 0;
        var process = 0;
        function comitData(){
            progress.reset();
            tid = setInterval(function(){
                process++;
                updatePercent(process);
                if(100 == process){
                    process = 0;
                }
            }, 100);
        }

        function stopData(){
            clearInterval(tid);
        }
        
        //更新進度
        function updatePercent(percent){
              progress.step(percent);
        }
        
    </script>
</head>
<body>
    <div id="progress">
            <canvas id="myCanvas" width="100" height="100"></canvas>
            <div id="txt">
                <div>
                    <font id="per" size="2">0</font>
                    <font size="2">%</font>
                  </div>
                  <div><font size="2">已花費時間</font></div>
                  <div><font id="time" size="2">0s</font></div>
            </div>
        </div>
    <div >
        <div id="main"> 
            <div>
                <div class="bttn" onclick="comitData()" >開始</div>
                <div class="bttn" onclick="stopData()" >中止</div>
            </div>
        </div>   
    </div>
</body>
<script>

    function Progress(){
        this.b = 0;
        this.self = null;
        this.per = null
        this.time = null;
        this.context = null;
        this.init = function(){
            var canvas = document.getElementById('myCanvas');
            this.context = canvas.getContext('2d');
            this.context.clearRect(0, 0, 100, 100);
            this.per = document.getElementById('per');
            this.time = document.getElementById('time');
            this.self = document.getElementById('progress');
        }
        this.reset = function(){
            this.b = new Date().getTime();
            this.time.innerHTML = '0秒'; 
            this.per.innerHTML = '0'; 
            this.self.style.display = 'block';
        }
        this.step = function(process){
            var now = new Date().getTime();
            var step = (now - this.b) / 1000;
            this.time.innerHTML = parseInt(step) + '秒'; 
            this.per.innerHTML = parseInt(process);
            var ctx = this.context; 
            ctx.beginPath();  
            ctx.moveTo(50, 50);  
            ctx.arc(50, 50, 50, 0, Math.PI * 2, false);  
            ctx.closePath();  
            ctx.fillStyle = '#ddd';  
            ctx.fill();  
            ctx.beginPath();  
            ctx.moveTo(50, 50);  
            ctx.arc(50, 50, 50, 0, Math.PI * 2 * process / 100, false);  
            ctx.closePath();  
            ctx.fillStyle = '#e74c3c';  
            ctx.fill();  
            ctx.beginPath();  
            ctx.moveTo(50, 50);  
            ctx.arc(50, 50, 45, 0, Math.PI * 2, true);  
            ctx.closePath();  
            ctx.fillStyle = 'rgba(125,125,125,0.3)';  
            ctx.fill();
            ctx.beginPath();  
            ctx.arc(50, 50, 40, 0, Math.PI * 2, true);  
            ctx.closePath();  
            ctx.strokeStyle = '#ddd';  
            ctx.stroke();
            if(100 == process){
                //do any
            }
        }
    }

    var progress = new Progress();
    progress.init();

</script>
</html>
效果如圖：javascript