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

Source: Internet
Author: User
Tags script tag

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.