有趣的js背景动画canvas-nest
使用方法
在页面的<body>标签内引入就OK了，而且这个js只有4k，非常的小巧。下面是博主的引入样例
[code]<script type="text/javascript" color="255,0,0" opacity='0.7' zIndex="-2" count="150" src="canvas-nest.js"></script>[/code]
注意调整zIndex参数的值。这个js默认是灰色，博主把调成红色。和本博的色调更加相符！ 附上这个js的源码，大家复制过去就可以直接使用了。
[code]!function(){function get_attribute(node,attr,default_value){return node.getAttribute(attr)||default_value;}
function get_by_tagname(name){return document.getElementsByTagName(name);}
function get_config_option(){var scripts=get_by_tagname("script"),script_len=scripts.length,script=scripts[script_len- 1];return{l:script_len,z:get_attribute(script,"zIndex",-1),o:get_attribute(script,"opacity",0.5),c:get_attribute(script,"color","0,0,0"),n:get_attribute(script,"count",99)};}
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;}
function draw_canvas(){context.clearRect(0,0,canvas_width,canvas_height);var all_array=[current_point].concat(random_lines);var e,i,d,x_dist,y_dist,dist;random_lines.forEach(function(r){r.x+=r.xa,r.y+=r.ya,r.xa*=r.x>canvas_width||r.x<0?-1:1,r.ya*=r.y>canvas_height||r.y<0?-1:1,context.fillRect(r.x- 0.5,r.y- 0.5,1,1);for(i=0;i<all_array.length;i++){e=all_array[i];if(r!==e&&null!==e.x&&null!==e.y){x_dist=r.x- e.x,y_dist=r.y- e.y,dist=x_dist*x_dist+ y_dist*y_dist;dist<e.max&&(e===current_point&&dist>=e.max/2&&(r.x-=0.03*x_dist,r.y-=0.03*y_dist),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);}
var the_canvas=document.createElement("canvas"),config=get_config_option(),canvas_id="c_n"+ config.l,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,y:null,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);set_canvas_size(),window.onresize=set_canvas_size;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;};for(var random_lines=[],i=0;config.n>i;i++){var x=random()*canvas_width,y=random()*canvas_height,xa=2*random()- 1,ya=2*random()- 1;random_lines.push({x:x,y:y,xa:xa,ya:ya,max:6000});}
setTimeout(function(){draw_canvas();},100);}(); [/code]
英文的说明
https://www.awesomes.cn/repo/hustcc/canvas-nest-js
官方发布页
https://github.com/hustcc/canvas-nest.js