网页粒子背景插件 -Canvas-nest.js

野性酷女 2022-07-13 13:43 304阅读 0赞

1、简介

Canvas-nest.js是一个非常好看的网页粒子背景插件，不需要依赖任何第三方库即可运行，提供额非常炫酷的背景。

2、特点

*  不依赖于任何框架或者库，使用原生js编写。
 *  轻量级，只有不到2kb（50行代码左右）。
 *  使用起来非常简单，直接在html页面引入即可。
    
     
    
    3、使用方法
    
    直接把下面这段代码粘贴到HTML的body标签中即可
    
    `<``script``type``=``"text/javascript"``src``=``"canvas-nest.js"``></``script``>`
    
    注：不要把上面代码放到head标签之类，否则不会生效。
    
     
    
    4、自定义外观
    
    在script中加入相应的参数，自定义参数值即可，如下：
    
    `<``script``type``=``"text/javascript"``color``=``"255,0,0"``opacity``=``"0.5"``count``=``"99"``src="canvas-nest.js"></``script``>`
    
     
    
    参数说明：
    
    `color="255,0,0"`    背景粒子线的颜色
    
    `opacity``=``"0.5"    背景粒子线的透明度，一般设置成0.5-1之间`
    
    `count``=``"99"       背景粒子线的密度，建议不要太大，否则页面容易卡死`
    
     
    
     
    
     
    
    另附官网地址：[http://www.atool.org/][http_www.atool.org]
    
     
    
     
    
     
    
     canvas-nest.js源码如下：
    
     
    
     /\*\*  
     \* Copyright (c) 2016 hustcc  
     \* License: MIT  
     \* Version: v1.0.1  
     \* GitHub: [https://github.com/hustcc/canvas-nest.js][https_github.com_hustcc_canvas-nest.js]  
    \*\*/  
    !function()\{function n(n,e,t)\{return n.getAttribute(e)||t\}function e(n)\{return document.getElementsByTagName(n)\}function t()\{var t=e("script"),o=t.length,i=t\[o-1\];return\{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)\}\}function o()\{a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight\}function i()\{r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.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.fillRect(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-=.03\*o,i.y-=.03\*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))\}),x(i)\}var a,c,u,m=document.createElement("canvas"),d=t(),l="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,y=\{x:null,y:null,max:2e4\};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")\[0\].appendChild(m),o(),window.οnresize=o,window.οnmοusemοve=function(n)\{n=n||window.event,y.x=n.clientX,y.y=n.clientY\},window.οnmοuseοut=function()\{y.x=null,y.y=null\};for(var s=\[\],f=0;d.n>f;f++)\{var h=w()\*a,g=w()\*c,v=2\*w()-1,p=2\*w()-1;s.push(\{x:h,y:g,xa:v,ya:p,max:6e3\})\}u=s.concat(\[y\]),setTimeout(function()\{i()\},100)\}();

[http_www.atool.org]: http://www.atool.org/
[https_github.com_hustcc_canvas-nest.js]: https://github.com/hustcc/canvas-nest.js