js放烟花效果,刚从某个网站扒下来的

<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"></head><body ><!– spring festival bg –><div id="springf" class="f-pa"><div class="g-container con f-pr"><canvas class="f-pa ca" id="j-spring-cas" width="800" height="300"></canvas><div class="f-pa rw"></div><div class="f-pa happy" id="j-spring-happy"></div><div class="f-pa yun"></div><div class="f-pa inputleft"></div></div></div><script>(function(){var canvas = document.getElementById("j-spring-cas");var ctx = canvas.getContext("2d");var bigbooms = [];var boomsCount = 0;function isCanvasSupported(){ var elem = document.createElement(‘canvas’); return !!(elem.getContext && elem.getContext(‘2d’)); };window.onload = function(){if (isCanvasSupported()) {setTimeout(initAnimate, 1000); }; };function initAnimate(){lastTime = new Date();animate();};function getRandom(a , b){return Math.random()*(b-a)+a;};Array.prototype.foreach = function(callback){for(var i=0;i<this.length;i++){if(this[i]!==null) callback.apply(this[i] , [i]);};};var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };var lastTime;function animate(){ctx.save();ctx.fillStyle = "#ffeaaa";ctx.fillRect(0,0, canvas.width, canvas.height);ctx.restore();var newTime = new Date(); if(newTime – lastTime > 600 && boomsCount < 10){var startX = getRandom(canvas.width/4, canvas.width*3/4);var boomX = startX + getRandom(-30, 30);var boomY = getRandom(canvas.height/4, canvas.height*3/4);var bigboom = new Boom(startX, 2, {x:boomX, y:boomY});bigbooms.push(bigboom);boomsCount++;lastTime = newTime;};bigbooms.foreach(function(index){var that = this;if(!this.dead){this._move();}else{this.booms.foreach(function(index){if(!this.dead) {this.moveTo(index);}else if(index === that.booms.length – 1){bigbooms[bigbooms.indexOf(that)] = null;boomsCount–;};})};});raf(animate);};var Boom = function(x,r,boomArea){this.booms = [];this.x = x;this.y = (canvas.height+r);this.r = r;this.boomArea = boomArea;this.theta = 0;this.dead = false;this.ba = parseInt(getRandom(10, 20));this.alphaStart = 0.3;this.arcArray = [];};Boom.prototype = {_paint:function(){ctx.save();var ap = 1, l = this.arcArray.length;var x, y, apl;apl = this.alphaStart;for (var i = l – 1; i >= 0; i–) {x = this.arcArray[i].x;y = this.arcArray[i].y;apl = apl * 0.9;if (apl > 0.01) {ctx.fillStyle = "rgba(244,190,32,"+apl+")";ctx.beginPath();ctx.arc(x , y , this.r + 1 * Math.random(), 0 , 2 * Math.PI);ctx.fill();ctx.fill();};};ctx.restore();},_move:function(){var dx = this.boomArea.x – this.x , dy = this.boomArea.y – this.y;this.x = this.x + dx * 0.02;this.y = this.y + dy * 0.02;this.arcArray.push({x:this.x,y:this.y});if(Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba){this._boom();this.dead = true;}else {this._paint();};},_boom:function(){var fragNum = getRandom(50, 100);var color;var fanwei = parseInt(getRandom(50, 60));for(var i = 0; i < fragNum; i++){color = {a:parseInt(getRandom(120,255)),b:parseInt(getRandom(120,255)),c:parseInt(getRandom(120,200))};var a = getRandom(-Math.PI, Math.PI);var x = getRandom(0, fanwei) * Math.cos(a) + this.x;var y = getRandom(0, fanwei) * Math.sin(a) + this.y;var radius = getRandom(0 , 2);var frag = new Frag(this.x , this.y , radius , color , x , y);this.booms.push(frag);};}};var Frag = function(centerX , centerY , radius , color ,tx , ty){this.tx = tx;this.ty = ty;this.x = centerX;this.y = centerY;this.dead = false;this.centerX = centerX;this.centerY = centerY;this.radius = radius;this.color = color;this.alphaStart = 1;this.arcArray = [];};Frag.prototype = {paint:function(){ctx.save();var ap = 1, l = this.arcArray.length;var x, y, apl;apl = this.alphaStart;for (var i = l – 1; i >= 0; i–) {x = this.arcArray[i].x;y = this.arcArray[i].y;apl = apl – 0.1;if (apl > 0) {ctx.beginPath();ctx.arc(x , y , this.radius , 0 , 2 * Math.PI);ctx.fillStyle = "rgba(" + this.color.a + "," + this.color.b + "," + this.color.c + ", "+ apl +")";ctx.fill();};};ctx.restore();},end:function(){this.alphaStart = this.alphaStart – 0.05;if (this.alphaStart <= 0) {this.dead = true;this.arcArray = null;return;}else{this.paint();};},moveTo:function(index){this.ty = this.ty + 0.3;var dx = this.tx – this.x , dy = this.ty – this.y;this.x = Math.abs(dx) < 0.1 ? this.tx : (this.x + dx * 0.1);this.y = Math.abs(dy) < 0.1 ? this.ty : (this.y + dy * 0.1);this.arcArray.push({x:this.x,y:this.y});if(Math.abs(dx) <= 1 || Math.abs(dy) <= 1){this.end();}else{this.paint();};}};})();</script>

</body></html>

每一个成功者都有一个开始。勇于开始,才能找到成功的路。

js放烟花效果,刚从某个网站扒下来的

相关文章:

你感兴趣的文章:

标签云: