parsing

With requstAniFrame, the browser redraws every 1000/60ms and then iterates through infinite motion, each particle being created using constructors. The overall configuration is done by using the static class. It is worth mentioning that when the mouse moves in, the nearby particles become larger. I stored an array storing the initial radius in the static class

Principle of animation:

  1. Global configuration (number of particles, store particle array, store particle radius array, minimum distance between particles, minimum distance between particles and mouse)
  2. For a single particle configuration, use the constructor (color, radius, speed) to store the particle in the array of particles in the global configuration, and the radius in the array of particles in the global configuration
  3. Redraw with requstAniFrame, clearing the canvas each time, looping out the values of global variables, moving, and so on

The effect

code

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
        overflow: hidden;
        /*background-color: # 020215; * /
    }

    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>
<script type="text/javascript"> // Compatible with requestAnimFrame window.requestAnimFrame = (function() {
        return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    function( callback ) { window.setTimeout( callback, 1000 / 60 ); }; }) (); // Background drawing functionfunction drawBg(cvs)
      {
        cvs.beginPath();
        cvs.fillStyle="# 020215"; CVS. FillRect (0, 0, wW, wH); cvs.save(); } // Random number 0-255 (RGB)function ran255() {returnMath.round(Math.random()*255); } // Random color constructorfunction Color(){
        this.r=ran255();
        this.g=ran255();
        this.b=ran255();
        this.rgb="rgba("+this.r+","+this.g+","+this.b+", 1)";
    }
    window.onload=function()
    {
      var can=document.getElementById("canvas");
      can.width=wW=window.innerWidth;
      can.height=wH=window.innerHeight;      
      var cvs=can.getContext("2d"); // Draw the background drawBg(CVS); Static class var Dots= {n:300, minDis:50, d_mouse:100, array:[], radiusArr:[]} // The configuration of each particlefunction Dot() { this.color = new Color(); This.x = math.round (math.random ()*wW); this.y = Math.round(Math.random()*wH); // Speed (different directions) this.vx = (math.random ()-0.5)*3; Enclosing vy = (Math. The random () 0.5) * 3; This.radius = math.round (math.random ()*5); } // initialize dot.prototype.draw =function() { cvs.beginPath(); cvs.fillStyle = this.color.rgb; CVS. The arc (enclosing x, enclosing y, enclosing the radius, 0360,false); cvs.fill(); }; // Create particles and place them in the arrayfor(var i=0; i<Dots.n; i++) { var dotObj = new Dot(); Dots.array.push(dotObj); Dots.radiusArr.push(dotObj.radius); } // Draw the particlesfunction drawDots()
      {
        drawBg(cvs);
        for(var i=0; i<Dots.n; i++) { Dots.array[i].draw(); } } drawDots(); // Move particlesfunction moveDots() {for(var i=0; i<Dots.n; i++) { var dot = Dots.array[i]; // Rebound judgmentif(dot.x <0 || dot.x>wW)
                {
                    dot.vx=-dot.vx;
                }
            if(dot.y <0 || dot.y>wH) { dot.vy=-dot.vy; } dot.x += dot.vx; dot.y += dot.vy; }} // Mix colors // linefunction connect()
     {
         function mixColor(dot1,dot2)
         {
            var color1=dot1.color;
            var color2=dot2.color;
            var r1=dot1.radius;
            var r2=dot2.radius;
            var r=Math.floor((color1.r*r1+color2.r*r2)/(r1+r2));
            var g=Math.floor((color1.g*r1+color2.g*r2)/(r1+r2));
            var b=Math.floor((color1.b*r1+color2.b*r2)/(r1+r2));
            return "rgba("+r+","+g+","+b+", 1)"
         }
        for(var i=0; i<Dots.n; i++) {for(var j=0; j<Dots.n; j++) { var dot1 = Dots.array[i]; var dot2 = Dots.array[j]; var color=mixColor(dot1,dot2);if(math.abs (dot1.x-dot2.x)<Dots. MinDis && math.abs (dot1.y-dot2.y)<Dots. MinDis) {cvs.lineWidth=0.2; cvs.beginPath(); cvs.strokeStyle=color; cvs.moveTo(dot1.x,dot1.y); cvs.lineTo(dot2.x,dot2.y); cvs.stroke(); } } } } can.onmousemove=function(ev)
     {
        var ev=window.event || ev;
        var pX=ev.pageX;
        var pY=ev.pageY;        
        for(var i=0; i<Dots.n; i++) {if(Math.abs(Dots.array[i].x-pX)<Dots.d_mouse && Math.abs(Dots.array[i].y-pY)<Dots.d_mouse)
            {
                var r=Dots.radiusArr[i]*5;
                Dots.array[i].radius=r;
            }
            else{ Dots.array[i].radius=Dots.radiusArr[i]; }}} // Infinite motionfunction infinateDot() {CVS. ClearRect (0, 0, wW, wH); moveDots(); drawDots(); connect(); requestAnimationFrame(infinateDot) } infinateDot(); } </script>Copy the code