canvas-畫進度條

var circle01 = document.querySelector("#myCanvas01");
drawAll(50, Math.PI, circle01);
  
 function drawAll(percent, sR, canvasId) {
                if (percent < 0 || percent > 100) {
                    return;
                }
                if (sR < Math.PI / 2 || sR >= 3 / 2 * Math.PI) {
                    return;
                }
                var cxt = canvasId.getContext('2d'),
                    cWidth = canvasId.width,
                    cHeight = canvasId.height,
                    baseColor = 'transparent',
                    PI = Math.PI,
                    SR = sR || 1 / 2 * PI; // 默認圓弧的起始點弧度爲π/2
                var g = cxt.createLinearGradient(170, 50, 60, 100, 100, 100); //創建漸變對象  漸變開始點和漸變結束點
                g.addColorStop(0, "#0053e1"); //添加顏色點
                g.addColorStop(1, "#00fafb"); //添加顏色點
                var coverColor = g;
                var finalRadian = ((2 * PI) * percent / 100); // 圈的終點弧度
                var step = (2 * PI) / 100; // 一個1%對應的弧度大小
                var text = 0; // 顯示的數字

                window.requestAnimationFrame(paint);

                function paint() {
                    cxt.clearRect(0, 0, cWidth, cHeight);
                    var endRadian = text * step;
                    // 畫灰色圓弧
                    // drawCanvas(cWidth / 2, cHeight / 2, 60, sR, sR + (PI + (PI - sR) * 2), baseColor, 12);
                    // drawCanvas(cWidth / 2, cHeight - 15, 95, sR, sR + (PI + (PI - sR) * 2), baseColor, 17);
                    // 畫紅色圓弧
                    drawCanvas(cWidth / 2, cHeight / 2, 55, 0, endRadian, coverColor, 6);


                    var textWidth = cxt.measureText(text + '%').width;
                    text++;

                    if (endRadian.toFixed(2) < finalRadian.toFixed(2)) {
                        window.requestAnimationFrame(paint);
                    }
                }

                function drawCanvas(x, y, r, sRadian, eRadian, color, lineWidth) {
                    cxt.beginPath();
                    cxt.lineCap = "round";
                    cxt.strokeStyle = color;
                    cxt.lineWidth = lineWidth;
                    cxt.arc(x, y, r, sRadian, eRadian, false);
                    cxt.stroke();
                }
            }         

 var canvas3 = document.querySelector("#canvas1");
draw(50, Math.PI, canvas3, " #438bfb", "#00ebff");

function draw(percent, sR, canvasId ,linearColor1 ,linearColor2) {
    if (percent < 0 || percent > 100) {
        return;
    }
    if (sR < Math.PI / 2 || sR >= 3 / 2 * Math.PI) {
        return;
    }


    var cxt = canvasId.getContext('2d'),
        cWidth = canvasId.width,
        cHeight = canvasId.height,
        baseColor = 'transparent',
        PI = Math.PI,
        SR = sR || 1 / 2 * PI; // 默認圓弧的起始點弧度爲π/2
    var g = cxt.createLinearGradient(170, 50, 60, 100, 100, 100); //創建漸變對象  漸變開始點和漸變結束點
    g.addColorStop(1, linearColor1); //添加顏色點
    g.addColorStop(0, linearColor2); //添加顏色點
    var coverColor = g;
    var finalRadian = SR + ((PI + (PI - SR) * 2) * percent / 100); // 紅圈的終點弧度
    var step = (PI + (PI - SR) * 2) / 30; // 一個1%對應的弧度大小
    var text = 0; // 顯示的數字

    window.requestAnimationFrame(paint);

    function paint() {
        cxt.clearRect(0, 0, cWidth, cHeight);
        var endRadian = SR + text * step;
        // 畫灰色圓弧
        // drawCanvas(cWidth / 2, cHeight / 2, 60, sR, sR + (PI + (PI - sR) * 2), baseColor, 12);
        drawCanvas(cWidth / 2, cHeight - 15, 95, sR, sR + (PI + (PI - sR) * 2), '#052d54', 17);
        // 畫紅色圓弧
        drawCanvas(cWidth / 2, cHeight - 15, 94, SR, endRadian, coverColor, 19);


        var textWidth = cxt.measureText(text + '%').width;
        text++;

        if (endRadian.toFixed(2) < finalRadian.toFixed(2)) {
            window.requestAnimationFrame(paint);
        }
    }

    function drawCanvas(x, y, r, sRadian, eRadian, color, lineWidth) {
        cxt.beginPath();
        cxt.lineCap = "round";
        cxt.strokeStyle = color;
        cxt.lineWidth = lineWidth;
        cxt.arc(x, y, r, sRadian, eRadian, false);
        cxt.stroke();
    }
}