JavaScript 火焰

<html><head><meta charset="utf8" /><title>火焰效果</title><style type="text/css">body {background-color:black;}p {color:white;text-align:center;}#canvas {border:1px dashed #333;display:block;margin:0 auto;background-color:black;}</style></head><body><script>var vendors = ["", "ms", "moz", "webkit", "o"];for (var i=0; i<vendors.length; i++) {var key = vendors[i] + "RequestAnimationFrame";if(window[key]) {console.log(key + "<br/>");}key = vendors[i] + "CancelAnimationFrame";if(window[key]) {console.log(key + "<br/>");}key = vendors[i] + "CancelRequestAnimationFrame";if(window[key]) {console.log(key + "<br/>");}}</script><canvas id="canvas" width="320px" height="480px">您的浏览器不支持canvas</canvas><p>低俗的人一定没有高雅需求，高雅的人往往会有低俗的需求</p><script type="text/javascript">var c = document.getElementById("canvas");var ctx = c.getContext("2d");//自动调整渲染间隔，来最佳匹配60fps。同时当标签不可见时暂停渲染function setupRAF() {window.requestAnimationFrame = (window.requestAnimationFrame        ||window.webkitRequestAnimationsFrame ||window.msRequestAnimationFrame      ||window.mozRequestAnimationFrame     ||window.oRequestAnimationFrame);}//清除画布上的内容function clearCanvas() {ctx.globalCompositeOperation = "source-over";ctx.clearRect(0, 0, c.width, c.height);}var CanvasController = function() {//火焰粒子var FireParticle = function(locationX, locationY, speedX, speedY) {this.location = {x: locationX,y: locationY,}//半径this.radius = .5 + Math.random() * 1;//颜色this.color = {r: 255,g: Math.round(Math.random() * 150),b: 0,}//速度this.speed = {x: (-1 + Math.random() * 2) + speedX,y: (Math.random() - 1) * speedY,};//生命总值this.healthPoint = 10 + Math.random() * 10;//当前生命值this.hp = this.healthPoint;//将各个颜色分量组成颜色值this.makeupColor = function(opacity) {return "rgba(" + this.color.r + "," + this.color.g + "," + this.color.b + "," + opacity + ")";}//更新this.update = function() {this.location.x += this.speed.x;this.location.y += this.speed.y;this.hp--;this.radius++;}//渲染this.render = function() {ctx.beginPath();var opacity = Math.round(this.hp / this.healthPoint * 100) / 100;var gradient = ctx.createRadialGradient(this.location.x, this.location.y, 0, this.location.x, this.location.y, this.radius);gradient.addColorStop(0, this.makeupColor(opacity));gradient.addColorStop(0.5, this.makeupColor(opacity));gradient.addColorStop(1, this.makeupColor(0));ctx.fillStyle = gradient;ctx.arc(this.location.x, this.location.y, this.radius, 0, 2 * Math.PI);ctx.fill();}}//火焰var Fire = function(locationX, locationY, speedX, speedY) {var count = Math.round(30 * speedY);//火焰粒子数组var particles = [];for(var i=0; i<count; i++) {particles.push(new FireParticle(locationX, locationY, speedX, speedY));}//更新this.update = function() {for(var i=0; i < particles.length; i++) {particles[i].update();if(particles[i].hp < 0) {particles[i] = new FireParticle(locationX, locationY, speedX, speedY);}}}//渲染this.render = function() {ctx.globalCompositeOperation = "lighter";ctx.save();ctx.scale(1, 3);for(var i=0; i < particles.length; i++) {particles[i].render();}ctx.restore();}}//火焰群var Fires = function(locationX, locationY) {var span = 15;var speedX = 0;var speedY = 5;var otherScaleY = 0.5;var leftFire = new Fire(locationX - span, locationY, speedX, speedY * otherScaleY);var middleFire = new Fire(locationX, locationY, speedX, speedY);var rightFire = new Fire(locationX + span, locationY, speedX, speedY * otherScaleY);//更新function update() {leftFire.update();middleFire.update();rightFire.update();}//渲染function render() {leftFire.render();middleFire.render();rightFire.render();}this.init = function() {function loop() {clearCanvas();update();render();requestAnimationFrame(loop);}loop();}}this.init = function() {var location = {x: c.width / 2,y: c.height / 6 + 35,};var fires = new Fires(location.x, location.y);setupRAF();fires.init();}}new CanvasController().init();</script></body>
</html>

JavaScript 火焰相关推荐

柏林噪声产生火焰等纹理
from: http://blog.csdn.net/jia20003/article/details/7220740 柏林噪声是一种特殊的随机噪声,即对于每个给定的值产生的随机数是唯一的,但是不同的 ...
threejs fire 火焰与烟雾效果
在threejs中有一个为我们提供了可以实现火焰和烟雾效果的包,我们可以直接引用这个包,通过设置某些参数实现需要的效果. 第一步引入fire包,可在工程文件夹下的example文件夹中找到 <s ...
3.JavaScript核心BOM操作学习（界面交互功能）——JavaScript获取自定义的方法，开始进行节点操作
今天事情比较多,学习的东西比较少第三天继续 H5新增获取自定义的方法 <body><div getTime="20" data-index="2&qu ...
codecombat极客战记森林(JavaScript)21-40关卡
PS:JavaScript编写,存在自定义类偷懒,如果你的自定义类和我不同是正常的 21-强攻ATETH塔 // 食人魔藏在他们的营地里. // 用一个有计划的进攻,来突破他们的防御!hero.mov ...
Threejs实现下雨，下雪，阴天，晴天，火焰
1,介绍该示例使用的是 r95版本Three.js库.使用Threejs粒子效果实现下雨,下雪,阴天,晴天,火焰. 效果图如下: 2,主要说明阴天,晴天实现方式,主要是替换场景的背景图片实现. 下 ...
生成一个cesium火焰特效
在 Cesium 中生成火焰效果需要使用一些三维图形学的技巧.这可以通过创建一个几何体,并使用纹理贴图和光照效果来模拟火焰的外观.您可以使用 JavaScript 或其他编程语言编写代码,并通过 Ce ...
html字母火焰效果怎么做,HTML5动感的火焰燃烧动画特效
本文作者html5tricks,转载请注明出处这又是一款基于HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画.一般像这样的接下来我们要简单分析一下实现这款HTML5火焰燃烧动画的 ...
javascript单引号_避免JavaScript单文化
javascript单引号本文由Tom Greco , Dan Prince和Mallory van Achterberg进行了同行评审. 感谢所有SitePoint的同行评审员使SitePoint ...
JavaScript技术
● &运算符_1.htm ● ·JavaScript的脆弱性_1.htm ● ·JavaScript技巧环绕三维文字_1.htm ● ·JavaScript时间显示三大心法_1.htm ● · ...

JavaScript 火焰

JavaScript 火焰相关推荐

最新文章

热门文章