Dynamic background of Web page--dynamic line changing with mouse

First, one.

The code is as follows:

<script type= "Text/javascript" src= "Https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js" ></ Script>

1 /**2 * Copyright (c) HUSTCC3 * License:mit4 * version:v1.0.15 * Github:https://github.com/hustcc/canvas-nest.js6 **/7!8 function() {9     functionN (n, E, t) {Ten         returnN.getattribute (e) | |T One     } A     functione (n) { -         returndocument.getelementsbytagname (n) -     } the     functionT () { -         varT = e ("Script"), -o =T.length, -i = T[o-1]; +         return { - L:o, +Z:n (i, "ZIndex", 1), AO:n (i, "opacity",. 5), atC:n (i, "color", "0,0,0"), -n = {(I, "Count", 99) -         } -     } -     functionO () { -A = M.width = Window.innerwidth | | Document.documentElement.clientWidth | |Document.body.clientWidth, inc = m.height = Window.innerheight | | Document.documentElement.clientHeight | |Document.body.clientHeight -     } to     functionI () { +R.clearrect (0, 0, A, c); -         varN, E, T, O, M, l; theS.foreach (function(i, x) { *              for(i.x + = I.xa, i.y + = I.ya, I.xa *= i.x > A | | i.x < 0? -1:1, I.ya *= i.y > C | | i.y < 0? -1:1, R.fillrec T (i.x-. 5, I.Y-. 5, 1, 1), E = x + 1; e < u.length; e++) n =U[e], $             NULL!== n.x &&NULL!== N.Y && (o = i.x-n.x, M = i.y-n.y, L = O * o + M * m, L < N.max && (n = = = y && l >= N . MAX/2 && (i.x-=), I.Y-=, (n.max-l)/N.max, R.beginpath (), r.linewidth = T/2, R.strok Estyle = "Rgba (" + D.C + "," + (T +. 2) + ")", R.moveto (i.x, I.Y), R.lineto (n.x, N.Y), R.stroke ()))Panax Notoginseng         }), - x (i) the     } +     varA, C, u, m = document.createelement ("Canvas"), AD =t (), theL = "C_n" +D.l, +r = M.getcontext ("2d"), -x = Window.requestanimationframe | | Window.webkitrequestanimationframe | | Window.mozrequestanimationframe | | Window.orequestanimationframe | | Window.msrequestanimationframe | | $     function(n) { $Window.settimeout (N, 1E3/45) -     }, -W =Math.random, they = { -X:NULL,WuyiY:NULL, theMax:2e4 -     }; WuM.id =L, -M.style.csstext = "Position:fixed;top:0;left:0;z-index:" + d.z + "; Opacity:" +D.O, AboutE ("body") [0].appendchild (m), $ O (), -Window.onresize =O, -Window.onmousemove =function(n) { -n = n | |window.event, Ay.x =N.clientx, +Y.Y =N.clienty the     }, -Window.onmouseout =function() { $y.x =NULL, theY.Y =NULL the     }; the      for(vars = [], f = 0; D.N > F; f++) { the         varh = w () *A, -g = w () *C, inV = 2 * W ()-1, thep = 2 * W ()-1; the S.push ({ About X:h, the Y:g, the Xa:v, the Ya:p, +Max:6e3 -         }) the     }BayiU =S.concat ([y]), theSetTimeout (function() { the I () -     }, -100) the} ();

The first is the direct introduction of the method, the second can be copied directly into the JS file.

The author's GitHub address is https://github.com/hustcc/canvas-nest.js

Web page Dynamic background-dynamic lines that are transformed with the mouse