js实现canvas彩色正方形框体穿越粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:js实现canvas彩色正方形框体穿越粒子动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> </head> <body> <canvas id="canvas" height="600"></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; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0