用javascript实现模拟火焰_javascript技巧

不太像，而且比较耗资原，不知道有没有更好的办法=.=

<title>火焰</title> <script language="JavaScript"> function PixelAxis(left, bottom, width, height, color) { color = color || "#000000"; var pixels = []; for(var i = 0; i <= width; i++) { pixels[i] = []; for(var j = 0; j<=height; j++) { var img = new Image(1, 1); img.style.backgroundColor = color; img.style.position = "absolute"; img.style.left = left + i; img.style.top = bottom - j; pixels[i][j] = img; document.body.appendChild(img); } } return function(x, y, color) { pixels[x][y].style.backgroundColor = color; } } function color(r, g ,b) { r = r > 0xF ? r.toString(16) : "0" + r.toString(16); g = g > 0xF ? g.toString(16) : "0" + g.toString(16); b = b > 0xF ? b.toString(16) : "0" + b.toString(16); return "#"+r+g+b; } function fireColor(seed) { return color(seed, Math.floor(0.5*seed), 0); } function spreadSeeds(width, height) { var pixel = PixelAxis(200, 200, width, height); var fc = []; fc[0] = []; return function() { for(var i = 0; i <= width; i++) { var s = Math.floor(255 * Math.random()); fc[0][i] = s; pixel(i, 0, fireColor(s)); } for(var i = 1; i < height; i++) { fc[i] = []; for(var j = 0; j <= width; j++) { var a = j > 0 ? fc[i-1][j-1] : 0; var b = fc[i-1][j]; var c = j < width ? fc[i-1][j+1] : 0; var s = Math.floor((a+b+c)/3); //alert(c); fc[i][j] = s; s = s-Math.floor(i/height*255); s = s > 0 ? s : 0; pixel(j, i, fireColor(s)); } } } } </script> <script> var f = spreadSeeds(60, 120); setInterval("f()",1); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]