js实现canvas粒子能量喷射彩色曲线动画效果代码-html代码-BFW代码库

js实现canvas粒子能量喷射彩色曲线动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas粒子能量喷射彩色曲线动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">





    <style>
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            background-color: black;
        }
    </style>

</head>

<body translate="no">
    <canvas id="c" width="456" height="744"></canvas>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script id="rendered-js">
        var w = c.width = window.innerWidth,
        h = c.height = window.innerHeight,
        ctx = c.getContext('2d'),

        repaintAlpha = .1,
        lineWidth = .1,
        radApart = .5,
        accApart = .001,
        jitter = 20,
        gui = new dat.GUI(),

        bx = -w / 2, // boundary min x
        bX = w / 2,
        by = -h / 2,
        bY = h / 2,

        mx = Math.random() * 200 - 100,
        my = Math.random() * 200 - 100,

        pairs = [],
        frame = 0;

        function anim() {

            window.requestAnimationFrame(anim);

            ctx.globalCompositeOperation = 'source-over';
            ctx.fillStyle = 'rgba( 0, 0, 0, alp )'.replace('alp', repaintAlpha);
            ctx.fillRect(0, 0, w, h);
            ctx.globalCompositeOperation = 'lighter';

            ctx.lineWidth = lineWidth;

            ++frame;

            if (pairs.length < 100 && Math.random() < .3) pairs.push(new Pair());

            ctx.translate(w / 2, h / 2);
            pairs.map(function (pair) {
                pair.step();
            });
            ctx.translate(-w / 2, -h / 2);
        }

        function Pair() {

            this.reset();
        }
        Pair.prototype.reset = function () {

            var rad = Math.random() * Math.PI * 2,
            acc = Math.random() * .1 + .01,
            radDiff = Math.random() * radApart;

            if (Math.random() < .5) radDiff *= -1;

            this.midRad = rad + radDiff / 2;

            this.p1 = new Point(rad, acc);
      .........完整代码请登录后点击上方下载按钮下载查看