好久没来写博客了,最近被公司的一个傻逼部门拖着了,一直忙到现在,今天才把他们的第二版做好,唉。。。郁闷的不行,算了,不讲废话了。开始进入正题吧。
这个组件是在canvas上的各个点连成线,然后随机变动,当长度达到一个值的时候线就会断掉。
// JavaScript Document
function 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();
// }
};
这些注释的代码是之前走的弯路,之前想的太复杂了,后来精简以后的代码就是现在的这样的,大神们请多多指教,如果又能用到的地方或者是能帮助您的地方,万分荣幸。谢谢查看此博客。