js放烟花效果，刚从某个网站扒下来的
2015-02-04 19:09
302 查看
<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
b5b0
= 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>
</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
b5b0
= 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.Net AJAX+userControl+js实现仿igoogle效果网站
- ASP.Net AJAX+userControl+js实现仿igoogle效果网站
- js向上无缝滚动，网站公告效果
- FullPage.js – 轻松实现全屏滚动（单页网站）效果
- FullPage.js – 轻松实现全屏滚动（单页网站）效果的应用
- 有些网站的首页图片切换的效果（js）
- js向上无缝滚动,网站公告效果 具体代码
- Js打造层拖动实例：网站菜单拖拽移位效果
- Js实现网站常用的评分效果!
- ASP.Net AJAX+userControl+js实现仿igoogle效果网站
- ajax拖动层，保存层位置，这段代码是从网络人扒拉下来的（非XAJAX），使用类库prototype.js，感觉效果非常好
- ajax拖动层，保存层位置，这段代码是从网络人扒拉下来的（非XAJAX），使用类库prototype.js，感觉效果非常好
- 电子商务网站上的常用的js放大镜效果
- js+css完成网站的会员照片信息显示效果
- ASP.Net AJAX+userControl+js实现仿igoogle效果网站
- ajax拖动层，保存层位置，这段代码是从网络人扒拉下来的（非XAJAX），使用类库prototype.js，感觉效果非常好
- js+css完成网站的经典效果
- 无意中发现一个js网站，先记录下来，有空再研究
- js向上无缝滚动,网站公告效果 具体代码