和眼睛跟隨鼠標(biāo)一樣，有些大佬的博客背景下雪，落葉，還有連線(xiàn)的，總覺(jué)得很酷炫，主要是思路，度娘了一下，發(fā)現(xiàn)其實(shí)還好理解，代碼直接貼，其中有注釋。
這是效果：
粒子.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas實(shí)現(xiàn)背景動(dòng)態(tài)粒子連線(xiàn)</title>
<style>
html,body{
margin:0;
padding:0;
width: 100%;
height:100%;
/*去掉瀏覽器默認(rèn)垂直和水平滑動(dòng)條*/
overflow:hidden;
}
</style>
</head>
<body>
<canvas></canvas>
</body>
</html>
<script>
//得到標(biāo)簽
var myCanvas = document.querySelector("canvas");
//設(shè)置畫(huà)布的寬高為瀏覽器的寬高
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
//得到canvas的上下文
var ctx = myCanvas.getContext("2d");
//自適應(yīng)瀏覽器的寬高
window.onresize = function(){
//設(shè)置畫(huà)布的寬高為瀏覽器的寬高
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
}
// particle粒子構(gòu)造函數(shù)
function Particle(){
// 隨機(jī)生成粒子距離原點(diǎn)的x，y距離用dotx和doty來(lái)表示
this.dotx = Math.random() * myCanvas.width;
this.doty = Math.random() * myCanvas.height;
// 隨機(jī)生成x,和y方向的運(yùn)動(dòng)信號(hào)量
do{
this.idx = (Math.random() * 2) - 1;
this.idy = (Math.random() * 2) - 1;
// 當(dāng)生成的信號(hào)量為零重新生成
}while(this.idx == 0 && this.idy == 0);
// 兩點(diǎn)之間最大距離的平方
this.max = 6000;
// 渲染粒子
this.render();
// 粒子放進(jìn)數(shù)組
dotsArr.push(this);
}
// 初始化粒子
Particle.prototype.render = function(){
ctx.beginPath();
ctx.fillRect(this.dotx,this.doty,1,1);
}
// 定時(shí)器更新粒子的狀態(tài)
Particle.prototype.update = function(){
// 改變每個(gè)粒子的x,y值，讓粒子運(yùn)動(dòng)起來(lái)
this.dotx += this.idx;
this.doty += this.idy;
// 碰撞檢測(cè)，防止粒子運(yùn)動(dòng)出瀏覽器
if(this.dotx > myCanvas.width || this.dotx < 0){
this.idx = -this.idx;
}
if(this.doty > myCanvas.height || this.doty < 0){
this.idy = - this.idy;
}
// 渲染粒子
this.render();
// 鼠標(biāo)的中心值，當(dāng)沒(méi)在窗口移動(dòng)鼠標(biāo)，或鼠標(biāo)移出窗口，鼠標(biāo)的mouse.mouse_x
// 為null不進(jìn)行渲染
if(mouse.mouse_x != null){
// 鼠標(biāo)與各個(gè)粒子之間的x和y的距離
var mousex = this.dotx - mouse.mouse_x;
var mousey = this.doty - mouse.mouse_y;
//運(yùn)用直角三角形公式 x2 + y2 = z2求出兩點(diǎn)距離的平方
var mousez = mousex * mousex + mousey * mousey;
// 當(dāng)粒子距離鼠標(biāo)在10000~20000之間，向鼠標(biāo)靠攏
if(mousez > mouse.max / 2 && mousez < mouse.max){
this.dotx -= mousex*0.03;
this.doty -= mousey*0.03;
}
// 距離鼠標(biāo)平方兩萬(wàn)以?xún)?nèi)的全部和鼠標(biāo)連線(xiàn)
if(mousez < mouse.max){
// 調(diào)用連線(xiàn)功能
this.toline(mouse.mouse_x,mouse.mouse_y,mousez);
}
}
// 某一粒子實(shí)例與所有粒子距離的判斷
for(let j = 0;j < dotsArr.length;j++){
// 不等于本身
if(dotsArr[j] != this){
// 實(shí)例與各個(gè)粒子之間的x和y的距離
var dx = this.dotx - dotsArr[j].dotx;
var dy = this.doty - dotsArr[j].doty;
//運(yùn)用直角三角形公式 x2 + y2 = z2求出兩點(diǎn)距離的平方
var dz = dx * dx + dy * dy;
// 距離鼠標(biāo)平方六千以?xún)?nèi)的全部和鼠標(biāo)連線(xiàn)
if(this.max > dz){
// 調(diào)用連線(xiàn)函數(shù)
this.toline(dotsArr[j].dotx,dotsArr[j].doty,dz);
}
}
}
}
// 連線(xiàn)函數(shù)
Particle.prototype.toline = function(x,y,z){
// 傳來(lái)的鼠標(biāo)與粒子距離平方大于粒子之間的距離的平方
// 確保能夠得到各自的rate
if(z > this.max){
var rate = (mouse.max - z) / mouse.max;
}else{
var rate = (this.max - z) / this.max;
}
// 開(kāi)始劃線(xiàn)
ctx.beginPath();
// 線(xiàn)寬
ctx.lineWidth = rate / 2;
// 線(xiàn)的顏色
ctx.strokeStyle = "rgba(0,0,0," + (rate + 0.2) + ")";
// 線(xiàn)的起點(diǎn)
ctx.moveTo(this.dotx,this.doty);
// 線(xiàn)的終點(diǎn)
ctx.lineTo(x,y);
// 劃線(xiàn)
ctx.stroke();
}
// 定義一個(gè)數(shù)組存放所有的粒子
var dotsArr = [];
// 向?yàn)g覽器里面放入兩百五十個(gè)粒子
for(let i = 0;i < 200;i++){
// 調(diào)用實(shí)例
new Particle();
}
// 定時(shí)器讓粒子動(dòng)起來(lái)
setInterval(function(){
// 畫(huà)布清屏
ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
// 更新每個(gè)粒子
for(let i = 0;i < dotsArr.length;i++){
dotsArr[i].update();
}
},10);
// 鼠標(biāo)的位置參數(shù)
var mouse = {"mouse_x":null,"mouse_y":null,"max":20000}
// 監(jiān)測(cè)鼠標(biāo)的移動(dòng)
document.onmousemove = function(event){
mouse.mouse_x = event.clientX;
mouse.mouse_y = event.clientY;
}
document.onmouseout = function(event){
mouse.mouse_x = null;
mouse.mouse_y = null;
}
</script>
代碼出自這位大佬：http://www.itdecent.cn/p/6f83fe84d4fb
干一行，愛(ài)一行，學(xué)到老，活到老~
