html代码

<canvasid="canvas">您的浏览器不支持canvas</canvas>

css代码

#canvas{background-color:cadetblue;display:block;overflow:hidden;}

javascript代码

varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");//画布大小canvas.width=window.innerWidth;canvas.height=window.innerHeight;//鼠标路径varmouseX=canvas.width/2;varmouseY=canvas.height/2;//浏览器窗口改变window.onresize=function(){canvas.width=window.innerWidthcanvas.height=window.innerHeight}//生成随机数functionrandomNum(x,y){returnMath.floor(Math.random()*(y-x+1)+x);}//创建小球对象functionBall(){}Ball.prototype={//初始化init:function(){this.r=randomNum(0.1,3);//小球半径this.color="#fff";//小球颜色//随机坐标轴this.x=randomNum(this.r,canvas.width-this.r);this.y=randomNum(this.r,canvas.height-this.r);//随机速度this.speedX=randomNum(1,3)*(randomNum(0,1)?1:-1);this.speedY=randomNum(1,3)*(randomNum(0,1)?1:-1);},move:function(){//小球移动this.x+=this.speedX*0.2;//x轴移动this.y+=this.speedY*0.2;//y轴移动//左边界if(this.x<=this.r){this.x=this.r;//反方向this.speedX*=-1;}//右边界if(this.x>=canvas.width-this.r){this.x=canvas.width-this.rthis.speedX*=-1;}//上边界if(this.y<=this.r){this.y=this.r;this.speedY*=-1;}//下边界if(this.y>=canvas.height-this.r){this.y=canvas.height-this.r;this.speedY*=-1;}},draw:function(){//绘制小球ctx.beginPath();ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);ctx.fillStyle=this.color;ctx.fill();}}varballs=[];//小球盒子for(vari=0;i<0.0002*canvas.width*canvas.height;i++){ball=newBall();//实例化对象ball.init()//初始化数据balls.push(ball);}setInterval(function(){ctx.clearRect(0,0,canvas.width,canvas.height);//清除画布for(vari=0;i<balls.length;i++){balls[i].move();//小球移动balls[i].draw();//更新小球位置if(ball_to_mouse(balls[i])<130){//球体与鼠标距离-->画线ctx.lineWidth=(130-ball_to_mouse(balls[i]))*1.5/130;ctx.beginPath();ctx.moveTo(balls[i].x,balls[i].y);ctx.lineTo(mouseX,mouseY);ctx.strokeStyle=balls[i].color;ctx.stroke();}}for(vari=0;i<balls.length;i++){for(varj=0;j<balls.length;j++){if(ball_to_ball(balls[i],balls[j])<80){//球体之间距离-->画线ctx.lineWidth=(80-ball_to_ball(balls[i],balls[j]))*0.6/80;//线体透明ctx.globalAlpha=(130-ball_to_ball(balls[i],balls[j]))*1/80;ctx.beginPath();ctx.moveTo(balls[i].x,balls[i].y);ctx.lineTo(balls[j].x,balls[j].y);ctx.strokeStyle=balls[i].color;ctx.stroke();}}}//当前画布透明度ctx.globalAlpha=1.0;},30);//鼠标移动canvas.||window.event;mouseX=e.offsetX;mouseY=e.offsetY;}//鼠标跟每个点之间的距离functionball_to_mouse(obj){vardisX=Math.abs(mouseX-obj.x);vardisY=Math.abs(mouseY-obj.y);returnMath.sqrt(disX*disX+disY*disY);}//两点之间的距离functionball_to_ball(obj1,obj2){vardisX=Math.abs(obj1.x-obj2.x);vardisY=Math.abs(obj1.y-obj2.y);returnMath.sqrt(disX*disX+disY*disY);}