问题记录之--loading加载界面根据图片数量绘制直线

ui给的效果图是这样的

要实现中间那个加载的效果，核心思想是用canvas进行画图，然后根据加载的进度递归执行函数。下面老规矩直接上代码：

 

<template>
    <transition>
        <div id="loadPage">
            <canvas id="process" width="650" height="200"></canvas>
            <div>
                <span>loading{{ temp }}%</span>
            </div>
        </div>
    </transition>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
    #loadPage{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        text-align: center;
        background:#000;
        color: #fff;
        #process {
            margin-top: 500px;
        }
    }
</style>
<script ts>
    import list from '../assets/script/loadimg';

    import { mapState } from 'vuex'
    import { mapGetters } from 'vuex';

    export default{
        data(){
            return {
                progress: 0,
                temp: 0
            }
        },

        computed: {
            ...mapGetters([
                'userInfo'
            ])
        },

        mounted() {
            let imagesList = list.list;
            let len = imagesList.length;
            let images = [];
            let count = 0;
            this.progress = parseInt(count/len);

            if (imagesList.length > 0) {
                imagesList.forEach((item) => {
                    let imgUrl = require('../assets/images/' + item);
                    let img = document.createElement('img');
                    img.src = imgUrl;
                    images.push(img);
                })
            }
            var timer = setInterval( ()=>{
                var self = this;
                images.forEach(function(img, index){
                    if(img.complete){
                        count = count + 1;
                        images.splice(index, 1)
                    }
                });
                this.progress = parseInt(count * 100 / len);
                if(this.temp < this.progress - 1){
                    this.temp += 2;
                }

                if(this.progress == 100 && this.temp >= this.progress-1){
                    window.clearInterval(timer);
                    setTimeout( ()=>{
                        if(this.userInfo != null){
                            this.$store.dispatch('loadHide', false);
                            clearTimeout(timer);
                        }
                    }, 600 )
                }
                self.images = images;

                //console.log(this.progress + "bbb" +this.temp)
                var c = document.getElementById('process'),
                ctx = c.getContext('2d');

                //画线
                ctx.lineWidth = 25;
                ctx.strokeStyle = "#fff";
                ctx.lineCap = "round";

                ctx.beginPath();
                ctx.moveTo(50, 150);
                ctx.lineTo(600, 150);
                ctx.stroke();
                ctx.closePath();

                function animate(temp){
                    requestAnimationFrame(function (){
                        drawCricle(ctx, temp);
                        if (temp < 98) {
                            animate();
                        }
                    });
                }

                function drawCricle(ctx, pecent) {
                    //画填充线
                    ctx.beginPath();
                    ctx.strokeStyle = "#00A7EE";
                    ctx.moveTo(50, 150);
                    ctx.lineTo(600 * ((pecent+2)/100), 150);
                    ctx.stroke();
                    ctx.closePath();
                }

                animate(this.temp);

            }, 33)
        }
    }
</script>

有人看到有什么不懂得可以直接来问我。