-
這是一個基于canvas繪制的光標(biāo)線條粒子組合動態(tài)網(wǎng)頁背景效果。這個特效使用非常方便，使用原生的 javascript畜侦，不依賴任何框架或者內(nèi)庫，包括不依賴jQuery饮戳，非常容易實現(xiàn)。
特效如圖：
效果圖.jpg 把如下代碼引入即可實現(xiàn)上圖效果：
!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.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=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)}();
- 未壓縮版以方便查看：
! function() {
//封裝方法，壓縮之后減少文件大小
function get_attribute(node, attr, default_value) {
return node.getAttribute(attr) || default_value;
}
//封裝方法，壓縮之后減少文件大小
function get_by_tagname(name) {
return document.getElementsByTagName(name);
}
//獲取配置參數(shù)
function get_config_option() {
var scripts = get_by_tagname("script"),
script_len = scripts.length,
script = scripts[script_len - 1]; //當(dāng)前加載的script
return {
l: script_len, //長度捏肢，用于生成id用
z: get_attribute(script, "zIndex", -1), //z-index
o: get_attribute(script, "opacity", 0.5), //opacity
c: get_attribute(script, "color", "0,0,0"), //color
n: get_attribute(script, "count", 99) //count
};
}
//設(shè)置canvas的高寬
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);
//隨機的線條和當(dāng)前位置聯(lián)合數(shù)組
var all_array = [current_point].concat(random_lines);
var e, i, d, x_dist, y_dist, dist; //臨時節(jié)點
//遍歷處理每一個點
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); //繪制一個寬高為1的點
for (i = 0; i < all_array.length; i++) {
e = all_array[i];
//不是當(dāng)前點
if (r !== e && null !== e.x && null !== e.y) {
x_dist = r.x - e.x, //x軸距離 l
y_dist = r.y - e.y, //y軸距離 n
dist = x_dist * x_dist + y_dist * y_dist; //總距離, m
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);
}
//創(chuàng)建畫布饥侵，并添加到body中
var the_canvas = document.createElement("canvas"), //畫布
config = get_config_option(), //配置
canvas_id = "c_n" + config.l, //canvas id
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, //當(dāng)前鼠標(biāo)x
y: null, //當(dāng)前鼠標(biāo)y
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;
//當(dāng)時鼠標(biāo)位置存儲猛计，離開的時候，釋放當(dāng)前位置信息
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;
};
//隨機生成config.n條線位置信息
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);
}();
