Verwenden von js zur Realisierung eines dynamischen Hintergrunds

fenster.onload = Funktion () {
    //Definieren Sie den Rand des Textkörpers vom Standardwert 8px->0px
    Dokument.Body.Style.Margin = "0";
    Dokument.Body.Style.Background = "#30333F";
    //Leinwand erstellen document.body.appendChild(document.createElement('canvas'));
    var Leinwand = Dokument.QuerySelector('Leinwand'),
        ctx = canvas.getContext('2d') //ctx gibt eine API/ein Dom zum Zeichnen auf der Leinwand zurück
    Leinwand.Breite = Fenster.Innenbreite;
    Leinwand.Höhe = Fenster.Innenhöhe;
    canvas.style.position = "fest";
    ctx.Zeilenbreite = .3;
    ctx.strokeStyle = (neue Farbe(150)).style;
    //Definieren Sie den Mausabdeckungsbereich var mousePosition = {
        x: 30 * Leinwandbreite / 100,
        y: 30 * Leinwandhöhe / 100
    };
    var Punkte = {
        nb: 1000, //Gesamtabstand der Punkte: 50,
        d_radius: 100,
        Array: []
    };
    //Erstellen Sie eine Farbklasse, die Farbklasse gibt einen Stringtyp rgba (*,*,*,.8) zurück.
    Funktion MixComponents(comp1, Gewicht1, comp2, Gewicht2) {
        Rückgabewert (Komp.1 * Gewicht1 + Komp.2 * Gewicht2) / (Gewicht1 + Gewicht2);
    }
    Funktion durchschnittlicheFarbstile(Punkt1, Punkt2) {
        var Farbe1 = Punkt1.Farbe,
            Farbe2 = Punkt2.Farbe;

        var r = mixComponents(Farbe1.r, Punkt1.Radius, Farbe2.r, Punkt2.Radius),
            g = mixComponents(Farbe1.g, Punkt1.Radius, Farbe2.g, Punkt2.Radius),
            b = mixComponents(Farbe1.b, Punkt1.Radius, Farbe2.b, Punkt2.Radius);
        zurückgebenErstellen Sie ColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
    }
    Funktion Farbwert(min) {
        gibt Math.floor(Math.random() * 255 + min) zurück;
    }
    Funktion erstelleFarbstil(r, g, b) {
        gibt „rgba(' + r + ',' + g + ',' + b + ', 0,8)' zurück;
    }
    Funktion Farbe(min) {
        min = min || 0;
        dies.r = Farbwert(min);
        this.g = Farbwert(min);
        dies.b = Farbwert(min);
        dieser.Stil = erstelleFarbstil(dieser.r, dies.g, dies.b);
    }
    //Erstellen Sie die Dot-Klasse und eine Reihe von Methoden function Dot() {
        dies.x = Math.random() * canvas.width;
        dies.y = Math.random() * canvas.height;

        dies.vx = -.5 + Math.random();
        dies.vy = -.5 + Math.random();

        dieser.radius = Math.random() * 2;

        diese.Farbe = neue Farbe();
    }

    Punkt.Prototyp = {
        zeichnen: Funktion () {
            ctx.beginPath();
            ctx.fillStyle = diese.Farbe.Stil;
            ctx.arc(dieses.x, dieses.y, dieser.radius, 0, Math.PI * 2, false);
            ctx.fill();
        }
    };
    Funktion moveDots() { //Bewegung des Dot-Objekts für (i = 0; i < dots.nb; i++) {

            var Punkt = Punkte.Array[i];

            wenn (Punkt.y < 0 || Punkt.y > Leinwand.Höhe) {
                Punkt.vx = Punkt.vx;
                dot.vy = - dot.vy;
            }
            sonst wenn (dot.x < 0 || dot.x > canvas.width) {
                Punkt.vx = - Punkt.vx;
                Punkt.vy = Punkt.vy;
            }
            Punkt.x += Punkt.vx;
            Punkt.y += Punkt.vy;
        }
    }
    function connectDots() { //Verbindung von DOt-Objekten for (i = 0; i < dots.nb; i++) {
            für (j = i; j < dots.nb; j++) {
                i_dot = Punkte.Array[i];
                j_dot = Punkte.Array[j];

                wenn ((i_dot.x - j_dot.x) < Punkte.Abstand && (i_dot.y - j_dot.y) < Punkte.Abstand && (i_dot.x - j_dot.x) > - Punkte.Abstand && (i_dot.y - j_dot.y) > - Punkte.Abstand) {
                    wenn ((i_dot.x - Mausposition.x) < Punkte.d_radius && (i_dot.y - Mausposition.y) < Punkte.d_radius && (i_dot.x - Mausposition.x) > - Punkte.d_radius && (i_dot.y - Mausposition.y) > - Punkte.d_radius) {
                        ctx.beginPath();
                        ctx.strokeStyle = durchschnittlicheColorStyles(i_dot, j_dot);
                        ctx.moveTo(i_dot.x, i_dot.y);
                        ctx.lineTo(j_dot.x, j_dot.y);
                        ctx.stroke();//Zeichne die definierte Route ctx.closePath();//Erstelle einen Pfad vom aktuellen Punkt zurück zum Startpunkt}
                }
            }
        }
    }
    Funktion createDots() {//Erstelle nb Dot-Objekte für (i = 0; i < dots.nb; i++) {
            Punkte.Array.Push(neuer Punkt());
        }
    }
    function drawDots() { //Referenziere die Dot-Prototypkette, verwende die draw-Methode und zeichne das Dot-Objekt auf die Leinwand for (i = 0; i < dots.nb; i++) {
            var Punkt = Punkte.Array[i];
            Punkt.zeichnen();
        }
    }
    Funktion animateDots() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); //Leinwand löschen, sonst werden die Linien verbunden moveDots();
        }
        Punkte zeichnen();
        requestAnimationFrame(animateDots);
    }
    createDots(); //Verwenden Sie die Funktion „Dot-Klasse“ zum Erstellen requestAnimationFrame(animateDots); //Verwenden Sie die einzigartige Canvas-Methode von Canvas mit 60-Hz-Bildschirmaktualisierung. document.querySelector('canvas').addEventListener('mousemove', function (e) {
        Mausposition.x = e.SeiteX;
        Mausposition.y = e.SeiteY;
    })

    document.querySelector('canvas').addEventListener('mouseleave', function (e) { //Wenn die Maus weggeht, kehrt die Verbindung automatisch zur Mitte der Leinwand zurück mousePosition.x = canvas.width / 2;
        Mausposition.y = Leinwandhöhe / 2;
    })

}