classDraw{
constructor(x,y,ctx,w,h){
this.x=x;
this.y=y;
this.w=w;
this.h=h;
this.ctx=ctx;
}
drawLine(){
this.ctx.strokeStyle="#00FFFF";
this.ctx.strokeRect(this.x,this.y,this.w,this.h);
this.ctx.fill();
}
drawPoint(x,y,r,opacity,hasShadow=false){
this.ctx.fillStyle=`rgba(0, 255, 255,${opacity})`;
// if(hasShadow){
// this.ctx.fillStyle = `rgba(255, 255, 255,1)`;
// this.ctx.shadowOffsetX = 0;
// this.ctx.shadowOffsetY = 0;
// this.ctx.shadowBlur = 5;
// this.ctx.shadowColor = '#00FFFF';
// }else{
// this.ctx.shadowBlur = opacity * 3;
// }
this.ctx.shadowBlur=opacity*3;
this.ctx.beginPath();
if(!x){
x=0;
}
if(!y){
y=0;
}
if(!opacity&&opacity!=0){
opacity=1;
}
this.ctx.arc(x,y,r,0,2*Math.PI);
this.ctx.closePath();
this.ctx.fill();
}
}
classPointextendsDraw{
constructor(x,y,ctx,w,h,canvasWidth,canvasHeight){
super(x,y,ctx,w,h);
this.canvasWidth=canvasWidth;
this.canvasHeight=canvasHeight;
this.moveNum=0;
}
init(){
// 清空画布
this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);
newDraw(this.x,this.y,this.ctx,this.w,this.h).drawLine();
this.drawContent();
}
draw(_elePointLeft,r,opacity=0.8,hasShadow=false){
letx=0,y=0;
letelePointLeft=_elePointLeft;
if(_elePointLeft>=(this.w*2+this.h*2)){
elePointLeft=_elePointLeft%(this.w*2+this.h*2);
}
if(elePointLeft<this.w){
x=elePointLeft+this.x;
y=this.y;
}
if(elePointLeft>this.w&&elePointLeft<(this.w+this.h)){
x=this.w+this.x;
y=elePointLeft-this.w+this.y;
}
if(elePointLeft>(this.w+this.h)&&elePointLeft<(this.w*2+this.h)){
x=(this.w+this.x)-(elePointLeft-(this.w+this.h));
y=this.y+this.h;
}
if(elePointLeft>(this.w*2+this.h)&&elePointLeft<(this.w*2+this.h*2)){
x=this.x;
y=(this.w*2+this.h*2)-elePointLeft+this.y;
}
newDraw(this.x,this.y,this.ctx,this.w,this.h).drawPoint(x,y,r,opacity,hasShadow);
}
drawContent(){
for(leti=0;i<6;i++){
leteleInterval=(this.w*2+this.h*2)/6;
letmainR=3;
letelePointLeft=this.moveNum+this.x+eleInterval*i+mainR+100;
this.draw(elePointLeft,mainR,0.8,true)
this.drawChild(elePointLeft,mainR)
}
}
drawChild(eleChidrenLeftPoint,mainPointR){
// 每个元素长度为10个半圆
letr=mainPointR;
// let left = mainPointR - (mainPointR + mainPointR / 4)
letleft=mainPointR-(mainPointR)
// let left = mainPointR
letopacity=1
for(leti=0;i<50;i++){
r=r-mainPointR/50;
if(r<1){
r=1
}
left=left+r
opacity=opacity-mainPointR/100;
letelePointLeft=eleChidrenLeftPoint-left;
this.draw(elePointLeft,r,opacity);
}
}
move(){
this.moveNum+=4;
this.init();
}
}
letobj={};
/**
*
* @param {*} x 相对容器的x轴坐标
* @param {*} w 相对容器的y轴坐标
* @param {*} width 容器宽度
* @param {*} height 容器高度
*/
functioninit(width,height,x=10,w=10){
letmeteorCanvas=document.getElementById('meteor');
letmeteorCtx=meteorCanvas.getContext('2d');
letcanvasWidth=meteorCanvas.clientWidth*1;
letcanvasHeight=meteorCanvas.clientHeight*1;
meteorCanvas.width=canvasWidth;
meteorCanvas.height=canvasHeight;
obj=newPoint(x,w,meteorCtx,width,height,canvasWidth,canvasHeight);
obj.init();
animate();
}
functionanimate(){
obj.move()
requestAnimationFrame(animate);
}
// export default init;
