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

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