js实现canvas雾状火焰交互动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现canvas雾状火焰交互动画效果代码，点击拖动试试

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">


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

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>

<canvas id="canvas" width="0" height="0" ></canvas>
<canvas id="canvas_2" width="0" height="0" ></canvas>

<script type="text/javascript">
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,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,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,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,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,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.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];
var blu = [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,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,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,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,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,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,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,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,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,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,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.0079,0.0159,0.0238,0.0317,0.0397,0.0476,0.0556,0.0635,0.0714,0.0794,0.0873,0.0952,0.1032,0.1111,0.1190,0.1270,0.1349,0.1429,0.1508,0.1587,0.1667,0.1746,0.1825,0.1905,0.1984,0.2063,0.2143,0.2222,0.2302,0.2381,0.2460,0.2540,0.2619,0.2698,0.2778,0.2857,0.2937,0.3016,0.3095,0.3175,0.3254,0.3333,0.3413,0.3492,0.3571,0.3651,0.3730,0.3810,0.3889,0.3968,0.4048,0.4127,0.4206,0.4286,0.4365,0.4444,0.4524,0.4603,0.4683,0.4762,0.4841,0.4921,0.5000,0.5079,0.5159,0.5238,0.5317,0.5397,0.5476,0.5556,0.5635,0.5714,0.5794,0.5873,0.5952,0.6032,0.6111,0.6190,0.6270,0.6349,0.6429,0.6508,0.6587,0.6667,0.6746,0.6825,0.6905,0.6984,0.7063,0.7143,0.7222,0.7302,0.7381,0.7460,0.7540,0.7619,0.7698,0.7778,0.7857,0.7937,0.8016,0.8095,0.8175,0.8254,0.8333,0.8413,0.8492,0.8571,0.8651,0.8730,0.8810,0.8889,0.8968,0.9048,0.9127,0.9206,0.9286,0.9365,0.9444,0.9524,0.9603,0.9683,0.9762,0.9841,0.9921,1];

  const mobile = ( navigator.userAgent.match(/Android/i)
      || navigator.userAgent.match(/webOS/i)
      || navigator.userAgent.match(/iPhone/i)
      //|| navigator.userAgent.match(/iPad/i)
      || navigator.userAgent.match(/iPod/i)
      || navigator.userAgent.match(/BlackBerry/i)
      || navigator.userAgent.match(/Windows Phone/i)
      );


  //Main display canvas
  var ctx = canvas.getContext("2d");
  //Hidden canvas
  var ctx_2 = canvas_2.getContext("2d");

  var width = 300;
  var height = 300;

  canvas.width = 550;
  canvas.height = 550;

  if(mobile){ 
    width = 100;
    height = 100;
    canvas.width = 300;
    canvas.height = 300;
  }

//Half width and half height for displaying image centrally
var hwidth = canvas.width/2;
var hheight = canvas.height/2;

canvas_2.width = canvas.width; 
canvas_2.height = canvas.height;

var TWO_PI = 2 * Math.PI;
var scale = canvas.width/width;

var u_ = [];
var v_ = [];
var u_old_ = [];
var v_old_ = [];
var dens_ = [];
var dens_old_ = [];

var iterations = 3;
var dt_ = 0.0001;
var diff_ = 0.0;
var visc_ = 0.0;
var radius = 1;
var strength = 100;
if(mobile){
  strength = 50;
}
var t = 0;

var animate = true;
var circle = true;
var add_velocity = true;
var add_density = true;

var minvar = 0;
var maxvar = 100;

var velocity = false;
var density = true;

var clear_button = {clear:function(){clear(); iterations = 3; radius = 1; strength = 100; if(mobile){strength = 50;}}};
var gui = new dat.GUI();
gui.add(this, 'circle');
gui.add(this, 'iterations').min(1.0).max(5.0).step(1.0).listen();
gui.add(this, 'density').listen().onChange(function(value){velocity = false; density = true;});
gui.add(this, 'velocity').listen().onChange(function(value){density  = false; velocity = true;});
gui.add(this, 'add_density');
gui.add(this, 'add_velocity');
gui.add(this, 'radius').min(1.0).max(10.0).step(1.0).listen();
gui.add(this, 'strength').min(1.0).max(1000.0).step(10.0).listen();
gui.add(this, 'visc_').min(0.0).max(1.0).step(0.0001).listen();
gui.add(this, 'diff_').min(0.0).max(1.0).step(0.0001).listen();
gui.add(clear_button, 'clear');

gui.close();


function clear(){
  for(i = 0; i < (width+2)*(height+2); i++){
    u_[i] = 0;
    v_[i] = 0;
    u_old_[i] = 0;
    v_old_[i] = 0;
    dens_[i] = 0;
    dens_old_[i] = 0;
  }
}


function IX(i,j){
  r.........完整代码请登录后点击上方下载按钮下载查看