炫酷线条背景动画

使用H5的Canvas实现网页的炫酷线条背景特效。

效果演示
在这里插入图片描述

代码展示

html内容

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title><style>
canvas{position:absolute;top:0;left:0;background-color:black;
}
</style></head>
<body><canvas id=c></canvas><script src="js/style.js"></script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

js内容

var w = c.width = window.innerWidth,h = c.height = window.innerHeight,ctx = c.getContext('2d'),count = (w*h/3000)|0,speed = 4,range = 80,lineAlpha = .05,particles = [],huePart = 360/count;for(var i = 0; i < count; ++i)particles.push(new Particle((huePart*i)|0));function Particle(hue){this.x = Math.random()*w;this.y = Math.random()*h;this.vx = (Math.random()-.5)*speed;this.vy = (Math.random()-.5)*speed;this.hue = hue;
}
Particle.prototype.update = function(){this.x += this.vx;this.y += this.vy;if(this.x < 0 || this.x > w) this.vx *= -1;if(this.y < 0 || this.y > h) this.vy *= -1;
}function checkDist(a, b, dist){var x = a.x - b.x,y = a.y - b.y;return x*x + y*y <= dist*dist;
}function anim(){window.requestAnimationFrame(anim);ctx.fillStyle = 'rgba(0, 0, 0, .05)';ctx.fillRect(0, 0, w, h);for(var i = 0; i < particles.length; ++i){var p1 = particles[i];p1.update();for(var j = i+1; j < particles.length; ++j){var p2 = particles[j];if(checkDist(p1, p2, range)){ctx.strokeStyle = 'hsla(hue, 80%, 50%, alp)'.replace('hue', ((p1.hue  + p2.hue + 3)/2) % 360).replace('alp', lineAlpha);ctx.beginPath();ctx.moveTo(p1.x, p1.y);ctx.lineTo(p2.x, p2.y);ctx.stroke();}}}
}anim();