JavaScriptcanvas绘制圆形加载进度条

body {
            text-align: center;
        }

        canvas {
            background: #ffffff;
        }

<canvas id="circle" width="500" height="400"></canvas>

var circle = document.getElementById("circle");
        var ctx = circle.getContext("2d");
        //结束角度
        var end = -90;
        // 创建变量，进度值1%
        var load = 0;
        // 创建定时器，绘制进度条
        var timer = setInterval(function () {
            //每次加载前清除画布
            ctx.clearRect(0, 0, 500, 400);
            ctx.beginPath();
            // 灰色底框
            ctx.strokeStyle = "#eee"; //底框的背景颜色
            ctx.lineWidth = 10; //底框的宽度
            //底框显示的位置想x,y,r,start,end
            ctx.arc(250, 200, 100, 0, 2 * Math.PI);  
            ctx.stroke(); //绘制底框，空心圆
            // 修改结束角度
            end += 3.6;
            // 开始新的路径
            ctx.beginPath();
            // 绘制新的圆环
            ctx.strokeStyle = "lightgreen";
            ctx.lineWidth = 10;
            //从顶点位置开始
            ctx.arc(250, 200, 100, -90 * Math.PI / 180, end * Math.PI / 180);
            ctx.stroke();
            // 设置中间的文字字体和大小
            ctx.font = "18px SimHei";
            load++;
            // 设置图形文字
            ctx.fillText("已加载完成：" + load + "%", 180, 208);
            if (load == 100) {
                clearInterval(timer);
            }
        }, 200);