SOURCE

<canvas id="canvas" >
    
</canvas>
<select  id="select" style="margin-left:16px" onchange="changeNum(this.value)">
    <option value="20">20</option>
    <option value="51">51</option>
    <option value="80" selected="selected">80</option>
    <option value="81.8">81.8</option>
    <option value="75.55">75.55</option>
</select>
<script>
	function changeNum(num){
        window.allNum = Number(num);
        clear();
        play();
    }
// window.onload = function(){
        var width = 300, height = 500;
        var canvas = document.getElementById("canvas");
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d"),
                cirX = canvas.width/ 2,
                cirY = canvas.height/ 3,
                rad = Math.PI * 2 / 100,
                n = 0,
                speed = 150,
                r = 80;
        var opacity = 0;
        var nextAngle = 0;
        var laxtNum = 0;
        var maxInt = 0;
        var allNum = 80; //占比
        //绘制底圈
        function initDi(){
            ctx.beginPath();   
            ctx.lineWidth = 15;
            ctx.arc(cirX, cirY, r, 0, Math.PI * 2, false);     
            ctx.strokeStyle = "rgba(255, 255, 255,0.2)";      
            ctx.stroke(); 
        }
              
        //绘制文字
        function initText(){
            ctx.beginPath();
            ctx.font = "30px Arial";
            ctx.fillStyle = "rgba(3, 254, 161, 1)";
            ctx.fillText(allNum+"%",cirX - 30 ,cirY +10);
        }
        
        //绘制蓝色扇形
        function writeBlue(n){
            ctx.lineWidth = 15;
            ctx.beginPath();
            if(nextAngle == 0){
                ctx.arc(cirX, cirY, r, -Math.PI/2,-Math.PI/2+ rad*n, false);
            }else{
                ctx.arc(cirX, cirY, r, nextAngle,-Math.PI/2+ rad*n, false);
            }
            opacity = n/allNum;
            ctx.strokeStyle = "rgba(3, 254, 161, "+opacity+")";
            ctx.stroke();
            nextAngle = -Math.PI/2+ rad*n+0.01;
        }
        function clear(){
            ctx.clearRect(0,0,canvas.width, canvas.height);
        }

        var play = function(){
            ctx.fillStyle="#1d274b";
            ctx.fillRect(0,0,canvas.width,canvas.height);
            initText();
            initDi();
            laxtNum = allNum%2;
            maxInt = allNum - laxtNum;
            var timer = requestAnimationFrame(function fn(){
                writeBlue(n)
                if(laxtNum>0){

                }else{

                }
                if(n < maxInt){
                    n= n+2;
                }else {
                    if(n<allNum){
                        n= n+laxtNum;
                    }else{
                        n = 0;
                        cancelAnimationFrame(timer);
                        return ;
                    }
                }
                 timer = requestAnimationFrame(fn);
            });
        }
        play();
 // }
</script>

#canvas{
            float:left;
        }