随机点变动

好久没来写博客了，最近被公司的一个傻逼部门拖着了，一直忙到现在，今天才把他们的第二版做好，唉。。。郁闷的不行，算了，不讲废话了。开始进入正题吧。

这个组件是在canvas上的各个点连成线，然后随机变动，当长度达到一个值的时候线就会断掉。

// JavaScript Documentfunction main(option){this.count=option.count;this.parentnode=option.parentnode;this.parentnode.style.height=option.canvas_height+"px";this.parentnode.style.width=option.canvas_width+"px";this.canvas_width=option.canvas_width;this.canvas_height=option.canvas_height;this.delay=option.delay;this.index=Math.floor(Math.random()*2);this.x1;this.y1;this.x2;this.y2;this.x3;this.y3;this.pos;this.pos2;this.pos3;this.x4;this.y4;this.x5;this.y5;this.pos4;this.pos5;this.params;this.flag=false;this.flag2=false;this.flag3=false;this.flag4=false;this.flag5=false;}main.prototype={init:function(){this.stratpos();this.stratpos2();this.stratpos3();this.stratpos4();this.stratpos5();this.y1=this.pos.y;this.x1=this.pos.x;this.y2=this.pos2.y;this.x2=this.pos2.x;this.y3=this.pos3.y;this.x3=this.pos3.x;this.y4=this.pos4.y;this.x4=this.pos4.x;this.y5=this.pos5.y;this.x5=this.pos5.x;this.canvas=this.createElem("canvas",{style:"position:absolute; left:0; top:0;"});this.canvas.height=this.canvas_height;this.canvas.width=this.canvas_width;this.parentnode.appendChild(this.canvas);this.ctx=this.canvas.getContext("2d");var _this=this;setInterval(function(){_this.equation();},this.delay);},//---------------------------------------------------------------添加元素方法createElem:function(tagname,stylecss){var elem=document.createElement(tagname);          for(var cssindex in stylecss){              elem.setAttribute(cssindex,stylecss[cssindex]);              }              return elem;},//-------------------------------------------------------------原点移动的方程stratpos:function(){this.ranx = Math.random();this.rany = Math.random();var posX,posY;posX=Math.floor(50-this.ranx*30);posY=Math.floor(this.rany*30+15);this.pos={"x":posX,"y":posY}//console.log(posX + "," +posY);},//-------------------------------------------------------------------第一个点equation:function(){this.animationcircle();},//----------------------------------------------动画animationcircle:function(){this.params=[];if(this.x1-this.pos.x>10){this.y1=this.x1+(this.pos.y-this.pos.x);this.x1=this.x1-0.05;this.flag=false;}else if(this.x1-this.pos.x<=-10){this.y1=this.x1+(this.pos.y-this.pos.x);this.x1=this.x1+0.05;this.flag=true;}else{if(this.flag){this.y1=this.x1+(this.pos.y-this.pos.x);this.x1=this.x1+0.05;}else if(!this.flag){this.y1=this.x1+(this.pos.y-this.pos.x);this.x1=this.x1-0.05;}}if(this.x2-this.pos2.x>15){this.y2=2*this.x2+(this.pos2.y-this.pos2.x*2);this.x2=this.x2-0.05;this.flag2=false;}else if(this.x2-this.pos2.x<-15){this.y2=2*this.x2+(this.pos2.y-this.pos2.x*2);this.x2=this.x2+0.05;this.flag2=true;}else{if(this.flag2){this.y2=2*this.x2+(this.pos2.y-this.pos2.x*2);this.x2=this.x2+0.05;}else if(!this.flag2){this.y2=2*this.x2+(this.pos2.y-this.pos2.x*2);this.x2=this.x2-0.05;}}if(this.x3-this.pos3.x>20){this.y3=3*this.x3+(this.pos3.y-this.pos3.x*3);this.x3=this.x3-0.05;this.flag3=false;}else if(this.x3-this.pos3.x<-20){this.y3=3*this.x3+(this.pos3.y-this.pos3.x*3);this.x3=this.x3+0.05;this.flag3=true;}else{if(this.flag3){this.y3=3*this.x3+(this.pos3.y-this.pos3.x*3);this.x3=this.x3+0.05;}else if(!this.flag3){this.y3=3*this.x3+(this.pos3.y-this.pos3.x*3);this.x3=this.x3-0.05;}}if(this.x4-this.pos4.x>25){this.y4=this.x4+(this.pos4.y-this.pos4.x);this.x4=this.x4-0.05;this.flag4=false;}else if(this.x4-this.pos4.x<-25){this.y4=this.x4+(this.pos4.y-this.pos4.x);this.x4=this.x4+0.05;this.flag4=true;}else{if(this.flag4){this.y4=this.x4+(this.pos4.y-this.pos4.x);this.x4=this.x4+0.05;}else if(!this.flag4){this.y4=this.x4+(this.pos4.y-this.pos4.x);this.x4=this.x4-0.05;}}if(this.x5-this.pos5.x>30){this.y5=0.5*this.x5+(this.pos5.y-this.pos5.x*0.5);this.x5=this.x5-0.05;this.flag5=false;}else if(this.x5-this.pos5.x<-30){this.y5=0.5*this.x5+(this.pos5.y-this.pos5.x*0.5);this.x5=this.x5+0.05;this.flag5=true;}else{if(this.flag5){this.y5=0.5*this.x5+(this.pos5.y-this.pos5.x*0.5);this.x5=this.x5+0.05;}else if(!this.flag5){this.y5=0.5*this.x5+(this.pos5.y-this.pos5.x*0.5);this.x5=this.x5-0.05;}}this.drawcircle();},drawcircle:function(){this.ctx.clearRect(0,0,this.canvas_width,this.canvas_height);this.ctx.fillStyle="rgba(42,175,220,0.6)";this.ctx.strokeStyle="#14a3d1";this.ctx.lineWidth="1";//this.ctx.translate(this.canvas.height*0.5,this.canvas.width*0.5);//console.log(this.x1,this.y1,this.x2,this.y2,this.x3,this.y3);var cir_index=[];if(this.count==3){cir_index=[[this.x1,this.y1],[this.x2,this.y2],[this.x3,this.y3]]}else if(this.count==2){cir_index=[[this.x1,this.y1],[this.x2,this.y2]]}else if(this.count==4){cir_index=[[this.x1,this.y1],[this.x2,this.y2],[this.x3,this.y3],[this.x4,this.y4]]}else if(this.count==5){cir_index=[[this.x1,this.y1],[this.x2,this.y2],[this.x3,this.y3],[this.x4,this.y4],[this.x5,this.y5]]}//console.log(cir_index);for(var i=0;i<this.count;i++){//console.log(this.x+""+(i+1));if(i==this.count-1){var long_x = Math.pow(cir_index[i][0]-cir_index[0][0],2);var long_y = Math.pow(cir_index[i][1]-cir_index[0][1],2);if(Math.pow(long_x+long_y,1/2)<120){this.ctx.beginPath();this.ctx.moveTo(cir_index[i][0],cir_index[i][1]);this.ctx.lineTo(cir_index[0][0],cir_index[0][1]);this.ctx.stroke();this.ctx.closePath();}}else{var long_x = Math.pow(cir_index[i][0]-cir_index[i+1][0],2);var long_y = Math.pow(cir_index[i][1]-cir_index[i+1][1],2);if(Math.pow(long_x+long_y,1/2)<120){this.ctx.beginPath();this.ctx.moveTo(cir_index[i][0],cir_index[i][1]);this.ctx.lineTo(cir_index[i+1][0],cir_index[i+1][1]);this.ctx.stroke();this.ctx.closePath();}}}if(this.count>=2){this.ctx.beginPath();this.ctx.arc(this.x1,this.y1,4,0,Math.PI*2,false);this.ctx.fill();this.ctx.closePath();this.ctx.beginPath();this.ctx.arc(this.x2,this.y2,4,0,Math.PI*2,false);this.ctx.fill();this.ctx.closePath();}if(this.count>=3){this.ctx.beginPath();this.ctx.arc(this.x3,this.y3,4,0,Math.PI*2,false);this.ctx.fill();this.ctx.closePath();}if(this.count>=4){this.ctx.beginPath();this.ctx.arc(this.x4,this.y4,4,0,Math.PI*2,false);this.ctx.fill();this.ctx.closePath();}if(this.count>=5){this.ctx.beginPath();this.ctx.arc(this.x5,this.y5,4,0,Math.PI*2,false);this.ctx.fill();this.ctx.closePath();}},//-------------------------------------------------------------------第二个点stratpos4:function(){this.ranx = Math.random();this.rany = Math.random();var posX,posY;//console.log(this.ranx);posX=Math.floor(95+this.ranx*20);posY=Math.floor(this.rany*30+15);this.pos4={"x":posX,"y":posY}},stratpos5:function(){this.ranx = Math.random();this.rany = Math.random();var posX,posY;posX=Math.floor(45+this.ranx*20);posY=Math.floor(this.rany*30+60);this.pos5={"x":posX,"y":posY}},stratpos2:function(){this.ranx = Math.random();this.rany = Math.random();var posX,posY;//console.log(this.ranx);posX=Math.floor(50-this.ranx*20);posY=Math.floor(this.rany*30+105);this.pos2={"x":posX,"y":posY}},////equation2:function(){//this.stratpos2();//this.y2=this.pos2.y;//this.x2=this.pos2.x;//this.params=[1,2];//var _this=this;//setInterval(function(){//_this.animationcircle2(_this);//},this.delay);//},//animationcircle2:function(_this){//_this.drawcircle2();//if(_this.x2-_this.pos2.x>15){//_this.y2=2*_this.x2+(_this.pos2.y-_this.pos2.x*2);//_this.x2=_this.x2-0.05;//_this.flag=false;//}else if(_this.x2-_this.pos2.x<-15){//_this.y2=2*_this.x2+(_this.pos2.y-_this.pos2.x*2);//_this.x2=_this.x2+0.05;//_this.flag=true;//}else{//if(_this.flag){//_this.y2=2*_this.x2+(_this.pos2.y-_this.pos2.x*2);//_this.x2=_this.x2+0.05;//}//else if(!_this.flag){//_this.y2=2*_this.x2+(_this.pos2.y-_this.pos2.x*2);//_this.x2=_this.x2-0.05;//}//}//////console.log(_this.x2+"-----"+_this.y2)//},//------------------------------------------------画圆//drawcircle2:function(){////this.canvas=this.createElem("canvas",{style:"position:absolute; left:0; top:0;"});////this.canvas.height=this.canvas_height;////this.canvas.width=this.canvas_width;////this.parentnode.appendChild(this.canvas);////this.ctx=this.canvas.getContext("2d");////this.ctx.fillStyle="rgba(44,177,223,0.6)";////this.ctx.translate(this.canvas.height*0.5,this.canvas.width*0.5)//this.ctx.beginPath()//this.ctx.arc(this.x2,this.y2,4,0,Math.PI*2,false)//this.ctx.fill();//this.ctx.closePath();//},stratpos3:function(){this.ranx = Math.random();this.rany = Math.random();var posX,posY;posX=Math.floor(this.ranx*20+105);posY=Math.floor(this.rany*20+105);this.pos3={"x":posX,"y":posY}},////equation3:function(){//this.stratpos3();//this.y3=this.pos3.y;//this.x3=this.pos3.x;//this.params=[1,2];//var _this=this;//setInterval(function(){//_this.animationcircle3(_this);//},this.delay);//},//animationcircle3:function(_this){//_this.drawcircle3();//if(_this.x3-_this.pos3.x>20){//_this.y3=3*_this.x3+(_this.pos3.y-_this.pos3.x*3);//_this.x1=_this.x3-0.05;//_this.flag=false;//}else if(_this.x3-_this.pos3.x<-20){//_this.y3=3*_this.x3+(_this.pos3.y-_this.pos3.x*3);//_this.x3=_this.x3+0.05;//_this.flag=true;//}else{//if(_this.flag){//_this.y3=3*_this.x3+(_this.pos3.y-_this.pos3.x*3);//_this.x3=_this.x3+0.05;//}//else if(!_this.flag){//_this.y3=3*_this.x3+(_this.pos3.y-_this.pos3.x*3);//_this.x3=_this.x3-0.05;//}//}//////console.log(_this.x3+"-----"+_this.y3)//},//------------------------------------------------画圆//drawcircle3:function(){////this.canvas=this.createElem("canvas",{style:"position:absolute; left:0; top:0;"});////this.canvas.height=this.canvas_height;////this.canvas.width=this.canvas_width;////this.parentnode.appendChild(this.canvas);////this.ctx=this.canvas.getContext("2d");////this.ctx.fillStyle="rgba(44,177,223,0.6)";////this.ctx.translate(this.canvas.height*0.5,this.canvas.width*0.5)//this.ctx.beginPath()//this.ctx.arc(this.x3,this.y3,4,0,Math.PI*2,false)//this.ctx.fill();//this.ctx.closePath();//this.drawline();//},////drawline:function(){//this.ctx.strokeStyle="#14a3d1";//this.ctx.lineWidth="1";//this.ctx.beginPath();//this.ctx.moveTo(this.x1,this.y1);//this.ctx.lineTo(this.x2,this.y2);//this.ctx.lineTo(this.x3,this.y3);//this.ctx.lineTo(this.x1,this.y1);//this.ctx.stroke();//this.ctx.closePath();//}};

这些注释的代码是之前走的弯路，之前想的太复杂了，后来精简以后的代码就是现在的这样的，大神们请多多指教，如果又能用到的地方或者是能帮助您的地方，万分荣幸。谢谢查看此博客。