js实现canvas彩色正方形框体穿越粒子动画效果代码-html代码-BFW代码库

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;
        }

        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) {
                        vars.ctx.moveTo(pta.x, pta.y);
                        vars.ctx.lineTo(ptb.x, ptb.y);
                    }
                }
                vars.ctx.stroke();
            }
        }

        function rotateShape(shape, yaw, pitch, roll) {
            var x,
            y,
            z,
            p,
            d;
            for (var i = 0; i < shape.s.length; ++i).........完整代码请登录后点击上方下载按钮下载查看