火焰"/>
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 火焰
发布评论