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

1.整理下思路，要获取异步加载JS文件的进度要怎么做？

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

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

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

2.怎么绘制一个动态的canvas环形loading加载图？

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

3.既然能获取到加载完毕的回调函数，也能够创建一个canvas loading实例，如何把它们关联到一起整合到一块？

1. 编写一个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);
           }
   
       }

   大概就是这个样子
   

2. 获取当前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)

                
                
            }
        }
    }

最终效果

附录：全部代码

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

                this.setArea(width, height)
            }

            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);
            }

            testFn() {
                ctxs.beginPath();
                ctxs.lineWidth = 10;
                ctxs.strokeStyle = '#ccc';
                ctxs.arc(50, 50, 45, 0, 2 * Math.PI);
                ctxs.stroke();
            }

        }

        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];

                document.getElementById('bodys').appendChild(scriptNode);

                let steps = 0;

                scriptNode.onload = function() {
                    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++;
                            }
                            console.log(`sciprtNode${i}已加载完成`)
                  
                            if (currentIndex == scriptArr.length) {
                                console.log(`全部JS加载完成`)
                            }
                        }
                    }, 20)

                }
            }
        }

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

        let canvasNode = document.getElementById('canvas'),
            ctxs = canvasNode.getContext("2d");

        let circle = new CircleProgress(ctxs, 100, 100, 10),
            eachs = parseInt(100 / scriptArr.length),
            max = eachs


        jsProgress(circle, eachs, max, scriptArr);

        // circle.testFn()
    </script>