vue 动态背景（星海）

项目需要做个动态背景  直接放代码

html部分

<canvas id="space">
        </canvas>

css:

    #space {
        width: 100%;
        height: 100%;
        display: block;
        vertical-align: baseline;
        position: absolute;
        z-index: -5;
    }

js 

setBackGroundImg() {
            window.requestAnimFrame = (function () {
                return window.requestAnimationFrame
            })();
            var canvas = document.getElementById("space");
            var c = canvas.getContext("2d");
            var numStars = 1900;
            var radius = '0.' + Math.floor(Math.random() * 9) + 1;
            var focalLength = canvas.width * 2;
            var warp = 0;
            var centerX, centerY;
            var stars = [], star;
            var i;
            var animate = true;
            initializeStars();

            function executeFrame() {
                if (animate)
                    window.requestAnimFrame(executeFrame);
                moveStars();
                drawStars();
            }

            function initializeStars() {
                centerX = canvas.width / 2;
                centerY = canvas.height / 2;

                stars = [];
                for (i = 0; i < numStars; i++) {
                    star = {
                        x: Math.random() * canvas.width,
                        y: Math.random() * canvas.height,
                        z: Math.random() * canvas.width,
                        o: '0.' + Math.floor(Math.random() * 99) + 1
                    };
                    stars.push(star);
                }
            }

            function moveStars() {
                for (i = 0; i < numStars; i++) {
                    star = stars[i];
                    star.z--;

                    if (star.z <= 0) {
                        star.z = canvas.width;
                    }
                }
            }

            function drawStars() {
                var pixelX, pixelY, pixelRadius;

                // Resize to the screen
                if (canvas.width !== window.innerWidth || canvas.width !== window.innerWidth) {
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                    initializeStars();
                }
                if (warp === 0) { // 此代码块改背景色为渐变色
                    var grd=c.createRadialGradient(canvas.width,canvas.height,canvas.width,canvas.width,canvas.height,1000);
                    grd.addColorStop(0,"rgba(1, 9, 41, 0.6)");
                    grd.addColorStop(1,"rgba(2, 8, 36, 0.6)");
                    c.fillStyle = grd;
                    c.fillRect(0, 0, canvas.width, canvas.height);
                }
                c.fillStyle = "rgba(209, 255, 255, " + radius + ")";
                for (i = 0; i < numStars; i++) {
                    star = stars[i];

                    pixelX = (star.x - centerX) * (focalLength / star.z);
                    pixelX += centerX;
                    pixelY = (star.y - centerY) * (focalLength / star.z);
                    pixelY += centerY;
                    pixelRadius = 1 * (focalLength / star.z);

                    c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
                    c.fillStyle = "rgba(209, 255, 255, " + star.o + ")";
                    //c.fill();
                }
            }

            executeFrame();
        }

效果图：