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

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

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

效果图

代码

页面中插入如下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.οnresize=function(){Event.rArray=[]; canvas.width=window.innerWidth; canvas.height=window.innerHeight}; Event.Init(); [/php]

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

[php]

大功告成~