js实现canvas雾状火焰交互动画效果代码
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0