js 绘制一个进度条加载的圆环

人生本是不可逆的旅程（当今认知下），但总想回到过去，改变过去的未来，所以渴望追求幻想，有了时光机器的概念，成功的实现来自实践，不能我想怎样，我想那样，我想这样；而是我做的怎样，我做的那样，我做的这样。

可是，人毕竟要有点幻想，因为那是我们对美好的追求所现，有所想，有所求，有所欲；敢想，敢做，敢拼。

人生没有绝对的绝路，绝路那是你可能没有变通，受地域、知识、环境所限！

机会是一扇扇门，知识流、信息流的把握，打开的钥匙就是对时间的考验！

如图：

css：

.progress_box {position: relative;width: 200px;height: 200px;display: flex;margin: auto;align-items: center;justify-content: center;}
#progress_canvas {width: 200px;height: 200px;z-index: 1;}
.progress_text {position: absolute;display: flex;align-items: center;justify-content: center;color: #ddd;}

html主体：

    
    
加载中...

javaScript：

//把角度转换成弧度
    var canvas = document.getElementById("progress_canvas");
    var cxtA = canvas.getContext("2d");
    var cx = 100;
    var cy = 100;
    // 绘制背景圆环
    function bgCircle(){
        cxtA.beginPath();
        cxtA.lineWidth = 6;
        cxtA.strokeStyle = "#eee";
        cxtA.arc(cx, cy, 94, 0, Math.PI * 2, false);
        cxtA.stroke();
    }
    bgCircle();
    //绘制运动圆环
    function drawCircle(n){
        cxtA.beginPath();
        cxtA.lineWidth = 6;
        cxtA.lineCap = "round";//线条的末端线帽 butt|round|square
        cxtA.strokeStyle = "blue";
        //arc(x,y,r,起始角，结束角，时针方向：false = 顺时针 true = 逆时针)
        cxtA.arc(cx, cy, 94 , 1.25 * Math.PI, 1.25 * Math.PI + n * Math.PI*2, false);
        cxtA.stroke();
    }
    function countInterval() {
        var count = 0;
        var timer = setInterval(function() {
            if (count <= 50) {
                this.drawCircle(count / 60);
                count += 2;
            } else {
                var text = document.getElementById("progress_text").innerHTML = "加载完成";
                clearInterval(timer)
            }
        }, 100)
    }
    countInterval()

你的心，骚动了吗？

反正我是无动于“中”，哈哈！