用javascript实现模拟火焰

更新时间：2007年10月03日 22:04:52 作者：

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

<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需再刷新一下页面才能执行]

您可能感兴趣的文章:

用javascript实现模拟火焰

js实现正方形颜色从下往上升的效果
大家有没有看到类似颜色从下往上升的效果，在本例将与大家介绍下此效果的具体实现
2014-08-08
深入php面向对象、模式与实践
这篇文章主要介绍了深入php面向对象、模式与实践,需要的朋友可以参考下
2016-02-02
获取今天，昨天，本周，上周，本月，上月时间（实例分享）
本篇文章主要分享了获取今天，昨天，本周，上周，本月，上月时间实例代码，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
inquirer.js一个用户与命令行交互的工具详解
这篇文章主要介绍了inquirer.js一个用户与命令行交互的工具详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
JavaScript 就地编辑HTML节点实现代码
JavaScript 就地编辑HTML节点实现代码
2009-07-07
微信小程序多列表渲染数据开关互不影响的实现
这篇文章主要介绍了微信小程序多列表渲染数据开关互不影响的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
JavaScript中Promise的简单使用及其原理详解
Promise是ES6最重要的特性之一，今天小编就来带大家一起系统且细致的研究一下Promise的用法以及原理，感兴趣的小伙伴可以学习一下哦
2023-03-03
js之切换全屏和退出全屏实现代码实例
这篇文章主要介绍了js之切换全屏和退出全屏实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
three.js实现圆柱体
这篇文章主要为大家详细介绍了three.js实现圆柱体的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
基于JavaScript实现生成名片、链接等二维码
本文使用javascript技术实现生成名片、链接等二维码的代码，代码简单易懂并附有注释，需要的朋友可以参考下本文
2015-09-09