Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home> Web Front-end> JS Tutorial> body text

用javascript实现模拟火焰_javascript技巧

WBOY

Release： 2016-05-16 19:08:45

Original

1467 people have browsed it

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

<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需刷新才能执行]

Related labels：

用javascript实现模拟火焰

source：php.cn

Previous article：JS创建优美的页面滑动块效果 - Glider.js_javascript技巧 Next article：用meta实现的页面跳转代码_基础知识

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

How to enable the desktop search bar in 360 Browser? Tutorial on activating the desktop search bar in 360 Browser

2024-08-20 11:45:13
atiamenu.dll - What is atiamenu.dll?

2024-08-20 11:43:21
atctrl.dll - What is atctrl.dll?

2024-08-20 11:43:13
How to enable incognito browsing in Cheetah Browser How to set up incognito browsing in Cheetah Browser

2024-08-20 11:43:00
asusosdnt.dll - What is asusosdnt.dll?

2024-08-20 11:42:05
aston.exe - What is aston.exe?

2024-08-20 11:42:02
What should I do if the Microsoft Edge translation function is missing? Edge browser translation function is missing. Problem analysis

2024-08-20 11:41:50
asusasvd.dll - What is asusasvd.dll?

2024-08-20 11:41:36
How to add plug-ins to Edge browser Introduction to how to add plug-ins to Edge browser

2024-08-20 11:41:31
'Zenless Zone Zero ' How to obtain the Medal Ⅰ of Rebuilding the Lido with Efforts

2024-08-20 11:39:09

Latest Issues

When the window is reduced to less than 90%, the jQuery top scroll bar fails I'm using ASP.NETVB and I've implemented a top scrollbar that simulates the default bottom...

From 2023-09-12 12:33:19

0

1

330

ajax operation failed unexpectedly We use ajax in many places on our website. An instance will sometimes behave erratically, ...

From 2023-08-28 16:25:52

0

1

289

Is there a CSS parent selector? How to select an element that is the direct parent of an anchor element? For example, my C...

From 2023-08-23 10:53:50

0

2

195

Is there a parent selector in CSS? How to select the <li> element that is the direct parent of the anchor eleme...

From 2023-08-21 10:49:24

0

2

202

How to disable scrolling when modal is open - Full Page JS What I want to do is disable JavaScript scrolling for the entire page when the modal is op...

From 2023-08-18 00:15:20

0

1

187

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

About us Disclaimer Sitemap: php.cn：Public welfare online PHP training，Help PHP learners grow quickly！