js实现canvas流体可交互拖拽火焰动画效果代码-html代码-BFW代码库

js实现canvas流体可交互拖拽火焰动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas流体可交互拖拽火焰动画效果代码，拖拽可生成新的火焰线。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <style>
        body {
      background-color: rgb(29,29,32);  
        margin: 0;
        overflow: hidden;
        background-repeat: no-repeat;
    }
    .label {
        position: absolute;
        top: 0;
        left: 0;
        padding: 5px 15px;
        color: #eee;
        font-size: 13px;
        background-color: rgba(0, 0, 0, .15);
    }
    .instructions {
        position: absolute;
        bottom: 0%;
        left: 0;
        padding: 5px 15px;
        color: #eee;
        font-size: 13px;
        background-color: rgba(0, 0, 0, .15);
    }
    canvas { display:block; }
    canvas_2 { display:block; }
    </style>


</head>

<body>
    <canvas id="canvas" width="0" height="0"></canvas>
    <canvas id="canvas_2" width="0" height="0"></canvas>
    <div class="label">FLUID DYNAMICS</div>
    <div class="instructions">DRAG TO AFFECT CANVAS</div>
</body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script>
    var red = [0.0053,0.0107,0.0160,0.0214,0.0267,0.0321,0.0374,0.0428,0.0481,0.0535,0.0588,0.0642,0.0695,0.0749,0.0802,0.0856,0.0909,0.0963,0.1016,0.1070,0.1123,0.1176,0.1230,0.1283,0.1337,0.1390,0.1444,0.1497,0.1551,0.1604,0.1658,0.1711,0.1765,0.1818,0.1872,0.1925,0.1979,0.2032,0.2086,0.2139,0.2193,0.2246,0.2299,0.2353,0.2406,0.2460,0.2513,0.2567,0.2620,0.2674,0.2727,0.2781,0.2834,0.2888,0.2941,0.2995,0.3048,0.3102,0.3155,0.3209,0.3262,0.3316,0.3369,0.3422,0.3476,0.3529,0.3583,0.3636,0.3690,0.3743,0.3797,0.3850,0.3904,0.3957,0.4011,0.4064,0.4118,0.4171,0.4225,0.4278,0.4332,0.4385,0.4439,0.4492,0.4545,0.4599,0.4652,0.4706,0.4759,0.4813,0.4866,0.4920,0.4973,0.5027,0.5080,0.5134,0.5187,0.5241,0.5294,0.5348,0.5401,0.5455,0.5508,0.5561,0.5615,0.5668,0.5722,0.5775,0.5829,0.5882,0.5936,0.5989,0.6043,0.6096,0.6150,0.6203,0.6257,0.6310,0.6364,0.6417,0.6471,0.6524,0.6578,0.6631,0.6684,0.6738,0.6791,0.6845,0.6898,0.6952,0.7005,0.7059,0.7112,0.7166,0.7219,0.7273,0.7326,0.7380,0.7433,0.7487,0.7540,0.7594,0.7647,0.7701,0.7754,0.7807,0.7861,0.7914,0.7968,0.8021,0.8075,0.8128,0.8182,0.8235,0.8289,0.8342,0.8396,0.8449,0.8503,0.8556,0.8610,0.8663,0.8717,0.8770,0.8824,0.8877,0.8930,0.8984,0.9037,0.9091,0.9144,0.9198,0.9251,0.9305,0.9358,0.9412,0.9465,0.9519,0.9572,0.9626,0.9679,0.9733,0.9786,0.9840,0.9893,0.9947,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
    var grn = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,.........完整代码请登录后点击上方下载按钮下载查看