每日鸡汤：只有启程才会到达理想和目的地，只有播种才会有收获。只有追求，才会品味堂堂正正的做人，只有保留一份单纯，才会多些人生的快乐！

演示地址：http://test.jensonhui.top/progress.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jensonhui's blog | canvas圆形进度条</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
    <style>
        .time-graph {
            padding-top: 20px;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
        }
        #time-graph-canvas {
            width: 180px;
            height: 180px;
        }
    </style>
</head>
<body>
    <div class="time-graph">
        <canvas id="time-graph-canvas" width="360" height="360"></canvas>
    </div>
</body>
<script>
    function drawMain(drawing_elem, percent, forecolor, bgcolor) {
        /*
            @drawing_elem: 绘制对象
            @percent：绘制圆环百分比, 范围[0, 100]
            @forecolor: 绘制圆环的前景色，颜色代码
            @bgcolor: 绘制圆环的背景色，颜色代码
        */
        var context = drawing_elem.getContext("2d");
        var center_x = drawing_elem.width / 2;
        var center_y = drawing_elem.height / 2;
        var rad = Math.PI * 2 / 100;
        var speed = 0;

        // 绘制背景圆圈
        function backgroundCircle() {
            context.save();
            context.beginPath();
            context.lineWidth = 8; //设置线宽
            var radius = center_x - context.lineWidth;
            context.lineCap = "round";
            context.strokeStyle = bgcolor;
            context.arc(center_x, center_y, radius, 0, Math.PI * 2, false);
            context.stroke();
            context.closePath();
            context.restore();
        }

        //绘制运动圆环
        function foregroundCircle(n) {
            context.save();
            context.strokeStyle = forecolor;
            context.lineWidth = 8;
            context.lineCap = "round";
            var radius = center_x - context.lineWidth;
            context.beginPath();
            context.arc(center_x, center_y, radius, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
            context.stroke();
            context.closePath();
            context.restore();
        }

        //绘制文字
        function text(n) {
            context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
            context.fillStyle = forecolor;
            var font_size = 40;
            context.font = font_size + "px Helvetica";
            var text_width = context.measureText(n.toFixed(0) + "%").width;
            context.fillText(n.toFixed(0) + "%", center_x - text_width / 2, center_y + font_size / 2);
            context.restore();
        }

        //执行动画
        (function drawFrame() {
            window.requestAnimationFrame(drawFrame);
            context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
            backgroundCircle();
            text(speed);
            foregroundCircle(speed);
            if (speed >= percent) return;
            speed += 1;
        }());
    }

    var time_canvas = document.getElementById("time-graph-canvas");
    drawMain(time_canvas, 80, "#85d824", "transparent");
</script>
</html>