I still remember that last year, when checking the information, I accidentally entered a blog named Ma Kaidong, who was attracted by his blog special effects. At that time, I was looking for a template, so I wanted to use this special effect on the registration and landing page. First, I checked the source code of the web page and clicked all the js and css links. After I tried to find them useless, I added a qq group beside the blog, but I was asked that no one cared about me, so I left the group in a fit of rage, and I didn't know anything about the special effects.

Later, in March this year, I happened to find that other people also used the special effect and shared it.... I have forgotten the link of that big guy. After reading this article, you can tell me that I will make up the link.

Having said so much, I am now on the right track:

Let's see the effect first

In this way, you only need to introduce js in the external network:

  <script src="http://open.sojson.com/common/js/canvas-nest.min.js" count="500" zindex="-2" opacity="0.5" color="47,135,193" type="text/javascript">

count is the number of lines, zindex sets the stack, and opacity is the line transparency

Here is the js source code, which has been encapsulated into automatic execution, and can be referenced in the page

! function() {
    //Encapsulation method, reduce file size after compression
    function get_attribute(node, attr, default_value) {
        return node.getAttribute(attr) || default_value;
    }
    //Encapsulation method, reduce file size after compression
    function get_by_tagname(name) {
        return document.getElementsByTagName(name);
    }
    //Get configuration parameters
    function get_config_option() {
        var scripts = get_by_tagname("script"),
            script_len = scripts.length,
            script = scripts[script_len - 1]; //Currently loaded script
        return {
            l: script_len, //Length, for generating id use
            z: get_attribute(script, "zIndex", -1), //Hierarchy
            o: get_attribute(script, "opacity", 0.5), //transparency
            c: get_attribute(script, "color", "0,0,0"), //Line color, best used RGB colour
            n: get_attribute(script, "count", 99) //Number of lines
        };
    }
    //Set up canvas Height and width
    function set_canvas_size() {
        canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 
        canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }

    //Rendering process
    function draw_canvas() {
        context.clearRect(0, 0, canvas_width, canvas_height);
        //Random line and current position union array
        var all_array = [current_point].concat(random_lines);
        var e, i, d, x_dist, y_dist, dist; //Temporary node
        //Traverse every point
        random_lines.forEach(function(r) {
            r.x += r.xa, 
            r.y += r.ya, //move
            r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1, 
            r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //Hit boundary, reverse bounce
            context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //Draw a point with width and height of 1
            for (i = 0; i < all_array.length; i++) {
                e = all_array[i];
                //Not the current point
                if (r !== e && null !== e.x && null !== e.y) {
                        x_dist = r.x - e.x, //x Shaft distance l
                        y_dist = r.y - e.y, //y Shaft distance n
                        dist = x_dist * x_dist + y_dist * y_dist; //Total distance, m
                    dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //Accelerate as you approach
                        d = (e.max - dist) / e.max, 
                        context.beginPath(), 
                        context.lineWidth = d / 2, 
                        context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")", 
                        context.moveTo(r.x, r.y), 
                        context.lineTo(e.x, e.y), 
                        context.stroke());
                }
            }
            all_array.splice(all_array.indexOf(r), 1);

        }), frame_func(draw_canvas);
    }
    //Create canvas and add to body in
    var the_canvas = document.createElement("canvas"), //canvas
        config = get_config_option(), //To configure
        canvas_id = "c_n" + config.l, //canvas id
        context = the_canvas.getContext("2d"), canvas_width, canvas_height, 
        frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
            window.setTimeout(func, 1000 / 45);
        }, random = Math.random, 
        current_point = {
            x: null, //Current mouse x
            y: null, //Current mouse y
            max: 20000
        };
    the_canvas.id = canvas_id;
    the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
    get_by_tagname("body")[0].appendChild(the_canvas);
    //Initialize canvas size

    set_canvas_size(), window.onresize = set_canvas_size;
    //The mouse position is stored at that time. When leaving, release the current position information
    window.onmousemove = function(e) {
        e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;
    }, window.onmouseout = function() {
        current_point.x = null, current_point.y = null;
    };
    //Random generation config.n Bar position information
    for (var random_lines = [], i = 0; config.n > i; i++) {
        var x = random() * canvas_width, //Random location
            y = random() * canvas_height,
            xa = 2 * random() - 1, //Random motion direction
            ya = 2 * random() - 1;
        random_lines.push({
            x: x,
            y: y,
            xa: xa,
            ya: ya,
            max: 6000 //Sticking distance
        });
    }
    //0.1 Seconds later
    setTimeout(function() {
        draw_canvas();
    }, 100);
}();