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>

时间: 2024-10-10 16:42:54

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

烟花效果(Canvas和Proton)

最近看了很多的烟花效果,我自己的感觉就是代码不是很难,只是需要对它的原理好好理解一下.我们都知道一个烟花从发射到炸裂经过的几个阶段,以及这些过程中涉及到了那些东西.那些量会对最后的炸开效果有影响,我们首相应该把这些量考虑好,之后才能上手去写这个程序,我不知道第一个人是怎么写出的但是我看出基本上所有的烟花效果都是那几个量,没什么区别只是有一些具体的值的大小可能不一样.下面我就分享一下我从网上找的一段代码: 这个烟花效果是自动随机产生烟花,不是我们控制的,相对比较简单. 1 <!DOCTYPE ht

JavaScript实战(带收放动画效果的导航菜单)

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏服:http://www.cnblogs.com/susufufu/p/5768402.html ) 今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-)) 动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到‘首页导航’,显示下面的分组菜单,分组菜单有子菜单,点击可缩放,带动画过度效果! 如何

在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问

有同学在群里提问,如何使用axure制作商品数量增加减少效果,见GIF图.虽然属于初级教程,但很多同学还是小白新手阶段,所以特地录制了详细的视频讲解,供大家学习参考! 该教程由原型库网站录制http://www.yuanxingku.com转载请注明出处! 在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问,布布扣,bubuko.com

js拖拽效果实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta

图片切换特效(1):原生JS图片切换效果

转自:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

什么仇什么怨?新年刚开始 BBC网站就遭黑客袭击

什么仇什么怨?新年刚开始 BBC网站就遭黑客袭击 [摘要]BBC旗下多家网站和视频点播服务无法连线,宕机达3个小时. 腾讯科技讯 1月1日,据国外媒体报道,英国广播公司(BBC)周四证实,其数字服务因遭到黑客袭击,宕机达3个小时.BBC旗下多家网站和视频点播服务无法连线,但电视台和电台未受影响. BBC通过Twitter发表声明,宣称因技术问题引发大规模宕机.BBC内部人士援引其新闻网站的消息称,数字服务遭到“分布式拒绝服务”攻击.这种攻击是利用目标系统网络服务功能缺陷或者直接消耗其系统资源,使

JS图片切换效果

源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

js实现手风琴效果

之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> <li class="pic1"><a href="javascript:;">床头明月光</a></li> <li class="pic2"><a href="javascr

原生JS实现分页效果1.0

不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ margin:20px 0; } #