Implement the line effect next to my blog HTML canvas-nest.js source code

Canvas-nest.js This JS file can be used to achieve cool lines and the mouse to interact with the function, the specific effect

JS specific source code as follows:

/** * Copyright (c) HUSTCC * License:mit * Version:%%gulp_inject_version%% * github:https://gith Ub.com/hustcc/canvas-nest.js **/!function() {      //encapsulation method, reducing file size after compression      functionGet_attribute (node, attr, default_value) {returnNode.getattribute (attr) | |Default_value; }      //encapsulation method, reducing file size after compression      functionGet_by_tagname (name) {returndocument.getElementsByTagName (name); }      //Get configuration Parameters      functionget_config_option () {varScripts = Get_by_tagname ("Script"), Script_len=scripts.length, Script= Scripts[script_len-1];//script that is currently loaded        return{L:script_len,//length, used to generate IDZ:get_attribute (script, "ZIndex",-1),//Z-indexO:get_attribute (script, "opacity", 0.5),//OpacityC:get_attribute (script, "Color", "0,0,0"),//ColorN:get_attribute (script, "Count", 99)//Count        }; }      //set the canvas's height width      functionset_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; }          //Drawing Process      functionDraw_canvas () {Context.clearrect (0, 0, Canvas_width, canvas_height); //random Line and current position Union array        varE, I, D, X_dist, Y_dist, Dist;//Temporary Node        //traverse processing every pointRandom_points.foreach (function(r, idx) {r.x+=R.xa, R.y+ = R.ya,//MovingR.xa *= r.x > Canvas_width | | R.x < 0? -1:1, R.ya*= r.y > Canvas_height | | R.y < 0? -1:1,//hit the border, bounce backwards.Context.fillrect (r.x-0.5, r.y-0.5, 1, 1);//draw a point with a width height of 1          //start at the next point           for(i = idx + 1; i < all_array.length; i++) {e=All_array[i]; //Current Point exists            if(NULL!== e.x &&NULL!==e.y) {x_dist= r.x-e.x;//x-Axis distance LY_dist = R.y-e.y;//y-Axis distance nDist = x_dist * x_dist + y_dist * y_dist;//total distance, MDist< E.max && (e = = = Current_point && dist >= E.MAX/2 && (r.x-= 0.03 * x_dist, r.y-= 0.03 * Y_dist),//speed up when you get close.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 ());      }}), Frame_func (Draw_canvas); }      //Create the canvas and add it to the body      varThe_canvas = document.createelement ("Canvas"),//CanvasConfig = get_config_option (),//Configurationcanvas_id = "C_n" + CONFIG.L,//Canvas IDContext = 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 xY:NULL,//Current Mouse ymax:20000//the square of the circle radius}, All_array; 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 sizeset_canvas_size (); Window.onresize=set_canvas_size; //when the mouse position is stored, leaving the current location information is releasedWindow.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;      }; //randomly generate CONFIG.N line position Information       for(varRandom_points = [], i = 0; CONFIG.N > i; i++) {        varx = Random () * Canvas_width,//Random Positiony = random () *canvas_height, xa= 2 * Random ()-1,//Random Motion Directionya = 2 * Random ()-1; //Random PointRandom_points.push ({x:x, y:y, Xa:xa, Ya:ya, Max:6000//adhesion distance        }); } All_array=Random_points.concat ([Current_point]); //draw after 0.1 secondsSetTimeout (function() {Draw_canvas (); }, 100); }();

Add a script tag to the body tag in the HTML page, as shown below

<script type= "Text/javascript" color= "208,55,66" opacity= "0.5" count= "to" src= "Test.js" ></script>

Color custom, opactity is transparent, generally 0.5-1 on it, Count is the number, not too big, too big may make the user's browser lag, SRC after the path of the JS file.

Ps:

I ordered the JS file directly with test.

Implement the line effect next to my blog HTML canvas-nest.js source code