JS实现多彩圆点气泡动态背景

一段简短的JS代码,利用html5的canva动画特性,实现多彩圆点气泡动态背景。

网上流传的那种动态背景使用的是easyBackground这种js库,原理是一样的~

 

效果图

js-circles-canvas-background

 

代码

页面中插入如下js代码,或者并入到js文件并引入到页面也可:

 var canvas=document.getElementById("canvas"); var cxt=canvas.getContext("2d"); function Dot(){     this.alive=true;this.x=Math.round(Math.random()*canvas.width);     this.y=Math.round(Math.random()*canvas.height);     this.diameter=Math.random()*10.8;     this.ColorData={Red:Math.round(Math.random()*255),Green:Math.round(Math.random()*255),Blue:Math.round(Math.random()*255)};     this.alpha=0.1;     this.color="rgba("+this.ColorData.Red+", "+this.ColorData.Green+","+this.ColorData.Blue+","+this.alpha+")";     this.velocity={x:Math.round(Math.random()<0.5?-1:1)*Math.random()*0.7,y:Math.round(Math.random()<0.5?-1:1)*Math.random()*0.7} } Dot.prototype={     Draw:function(){         cxt.fillStyle=this.color;cxt.beginPath();         cxt.arc(this.x,this.y,this.diameter,0,Math.PI*2,false);cxt.fill()     },     Update:function(){         if(this.alpha<0.8){             this.alpha+=0.01;             this.color="rgba("+this.ColorData.Red+", "+this.ColorData.Green+","+this.ColorData.Blue+","+this.alpha+")"         }         this.x+=this.velocity.x;         this.y+=this.velocity.y;         if(this.x>canvas.width+5||this.x<0-5||this.y>canvas.height+5||this.y<0-5){this.alive=false}     } }; var Event={     rArray:[],     Init:function(){         canvas.width=window.innerWidth;         canvas.height=window.innerHeight;         for(var x=0;x<150;x++){             this.rArray.push(new Dot())         }         this.Update()     },     Draw:function(){         cxt.clearRect(0,0,canvas.width,canvas.height);         this.rArray.forEach(function(dot){dot.Draw()})     },     Update:function(){         if(Event.rArray.length<150){             for(var x=Event.rArray.length;x<150;x++){Event.rArray.push(new Dot())}         }         Event.rArray.forEach(function(dot){dot.Update()});         Event.rArray=Event.rArray.filter(function(dot){return dot.alive});         Event.Draw();         requestAnimationFrame(Event.Update)     } }; window.onresize=function(){Event.rArray=[]; canvas.width=window.innerWidth; canvas.height=window.innerHeight}; Event.Init(); [/php] 

 

然后页面插入canvas动画层的锚点,ID要和js中设置的一致,这里是canvas。 [php]

大功告成~