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主體：

<div class="progress_box">
    <canvas id="progress_canvas" width="200" height="200"></canvas>
    <div class="progress_text" id="progress_text">加載中...</div>
</div>

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()

你的心，騷動了嗎？

反正我是無動於“中”，哈哈！