用javascript实现模拟火焰

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

<html> <head> <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> </head> <body bgcolor="#000000"> </body> <script> var f = spreadSeeds（60, 120）; setInterval（"f（）",1）; </script> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]