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

        .........完整代码请登录后点击上方下载按钮下载查看