canvas彩色正方体粒子飞跃背景动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas彩色正方体粒子飞跃背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> </head> <body> <canvas height="300" width="200" id="canvas"></canvas> <script type="text/javascript"> function project3D(x,y,z,vars){ var p,d; x-=vars.camX; y-=vars.camY; z-=vars.camZ; p=Math.atan2(x,z); d=Math.sqrt(x*x+z*z); x=Math.sin(p-vars.yaw)*d; z=Math.cos(p-vars.yaw)*d; p=Math.atan2(y,z); d=Math.sqrt(y*y+z*z); y=Math.sin(p-vars.pitch)*d; z=Math.cos(p-vars.pitch)*d; p=Math.atan2(x,y); d=Math.sqrt(x*x+y*y); x=Math.sin(p-vars.roll)*d; y=Math.cos(p-vars.roll)*d; return {x:vars.cx+x/z*vars.scale,y:vars.cy+y/z*vars.scale,d:z>0?Math.sqrt(x*x+y*y+z*z):-1} } function rgb(col){ col += 0.000001; var r = parseInt((0.5+Math.sin(col)*0.5)*16); var g = parseInt((0.5+Math.cos(col)*0.5)*16); var b = parseInt((0.5-Math.sin(col)*0.5)*16); return "#"+r.toString(16)+g.toString(16)+b.toString(16); } function process(vars){ vars.scale-=Math.cos(vars.frameNo/40)*8; vars.shipSpeed+=Math.cos(vars.frameNo/40)/30; vars.yaw+=Math.cos(vars.frameNo/100)/80; vars.pitch+=Math.sin(vars.frameNo/70)/40; vars.roll-=Math.cos(vars.frameNo/130)/40; vars.shipVX=Math.sin(vars.yaw)*Math.cos(vars.pitch)*vars.shipSpeed; vars.shipVZ=Math.cos(vars.yaw)*Math.cos(vars.pitch)*vars.shipSpeed; vars.shipVY=Math.sin(vars.pitch)*vars.shipSpeed; vars.camX+=vars.shipVX; vars.camY+=vars.shipVY; vars.camZ+=vars.shipVZ; for(var i=0;i<vars.shapes.length;++i){ rotateShape(vars.shapes[i],i/vars.shapes.length*.1,-i/vars.shapes.length*.1,i/vars.shapes.length*.1); if(vars.shapes[i].x-vars.camX>vars.fieldRadius)vars.shapes[i].x-=vars.fieldRadius*2; if(vars.shapes[i].x-vars.camX<-vars.fieldRadius)vars.shapes[i].x+=vars.fieldRadius*2; if(vars.shapes[i].y-vars.camY>vars.fieldRadius)vars.shapes[i].y-=vars.fieldRadius*2; if(vars.shapes[i].y-vars.camY<-vars.fieldRadius)vars.shapes[i].y+=vars.fieldRadius*2; if(vars.shapes[i].z-vars.camZ>vars.fieldRadius)vars.shapes[i].z-=vars.fieldRadius*2; if(vars.shapes[i].z-vars.camZ<-vars.fieldRadius)vars.shapes[i].z+=vars.fieldRadius*2; } } function sortFunction(a,b){ return b.dist-a.dist; } function draw(vars){ vars.ctx.globalAlpha=1; vars.ctx.fillStyle="rgba(0,0,0,.65)"; vars.ctx.fillRect(0, 0, canvas.width, canvas.height); var x,y,z,point,pta,ptb,a; for(i=vars.shapes.length;i--;){ x=vars.shapes[i].x; y=vars.shapes[i].y; z=vars.shapes[i].z; point=project3D(x,y,z,vars); a=1-Math.pow(point.d/vars.fieldRadius,10); vars.ctx.globalAlpha=a<0?0:a; vars.ctx.strokeStyle=rgb(vars.frameNo/16+(i/800)*(1/vars.scale*200)); vars.ctx.lineWidth=40/(1+point.d); vars.ctx.beginPath(); for(j=12;j--;){ pta=project3D(x+vars.shapes[i].s[j].a.x,y+vars.shapes[i].s[j].a.y,z+vars.shapes[i].s[j].a.z,vars); ptb=project3D(x+vars.shapes[i].s[j].b.x,y+vars.shapes[i].s[j].b.y,z+vars.shapes[i].s[j].b.z,vars); if(pta.d!=-1&&ptb.d!=-1){ .........完整代码请登录后点击上方下载按钮下载查看
网友评论0