通过获取异步加载JS文件进度实现一个canvas环形loading图

摘要：整理下思路，要获取异步加载文件的进度要怎么做答将需要异步载入的文件放进一个数组中。通过获取是否加载完毕怎么绘制一个动态的环形加载图答需要用到的核心有。

答：将需要异步载入的文件放进一个数组中。如下。

const scriptArr = ["./test_1.js", "./test_3.js", "./test_4.js", "./test_5.js"];

然后动态创建script标签插入到body标签中。通过script.onload获取JS是否加载完毕

答：需要用到的canvas 核心Api有：ctx.arc()。这是绘制园环的必须api.

编写一个circleProgress类，用来创建环形loading实例

    class CircleProgress {
        constructor(ctxs, width, height, arc) {
            this.ctx = ctxs
            this.width = width
            this.height = height
            this.arc = arc

            this.setArea(width, height)
        }
        //设置canvas的宽高
        setArea(width, height) {
            this.ctx.canvas.width = width
            this.ctx.canvas.height = height
        }
        //清除画布
        clearFill() {
            this.ctx.clearRect(0, 0, this.width, this.width);
        }
         //绘制环形进度图的背景 颜色是可配置的 
        fillBg() {
            this.ctx.beginPath();
            this.ctx.lineWidth = this.arc;
            this.ctx.strokeStyle = "#ccc";
            this.ctx.arc(this.width / 2, this.width / 2, 45, 0, 2 * Math.PI);
            this.ctx.stroke();
        }
        //绘制进度条
        fillArc(x) {
            this.ctx.beginPath();
            this.ctx.lineWidth = this.arc;
            this.ctx.strokeStyle = "yellow";
            this.ctx.arc(this.width / 2, this.width / 2, 45, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
            this.ctx.stroke();
        }
        //绘制中心数字展示
        fillText(x) {
            this.ctx.font = "14px" + " Arial";
            this.ctx.fillStyle = "red";
            this.ctx.textBaseline = "middle";
            this.ctx.textAlign = "center";
            this.ctx.fillText(x.toFixed(1) + "%", this.width / 2, this.width / 2);
        }
        //总绘制方法
        fill(x) {
            this.fillBg();
            this.fillArc(x);
            this.fillText(x);
        }

    }

大概就是这个样子

获取当前JS，加载进度

    function jsProgress(circle, eachs, max, scriptArr) {
        let currentIndex = 0;
        //遍历所有文件名
        for (let i = 0; i < scriptArr.length; i++) {
            let scriptNode = document.createElement("script");
            scriptNode.src = scriptArr[i];
            
            //插入创建好的script引用节点
            document.getElementById("bodys").appendChild(scriptNode);
            
            //创建分布值 每个文件占据的进度值 比如4个文件 每个文件占据100/4=25
            let steps = 0;
            
            //插入的文件加载完毕后的回调
            scriptNode.onload = function() {
                //按照每20毫秒一帧渲染canvas画布 以展示出动态的加载效果
                let ani = setInterval(function() {

                    //此处可以优化，有好的建议可以告诉我
                    if (steps <= max || steps == 100) {
                        circle.clearFill();
                        if (steps > 100) {
                            steps = 100
                        }

                        circle.fill(steps)
                        steps++
                    } else {
                        clearInterval(ani)
                        if (max <= 100) {
                            max = max + eachs
                            currentIndex++;
                        }
                        if (currentIndex == scriptArr.length) {
                            console.log(`全部JS加载完成`)
                        }
                        console.log(`sciprtNode${i}已加载完成`)
                    }
                }, 20)

                
                
            }
        }
    }