<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5 canvas绘制抽象液体流动火焰动画特效</title>
<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 src="/demos/googlegg.js"></script>
<script type="text/javascript" src="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');