js烟花特效代码(js烟花特效代码是多少)
如何用javascript做出点击屏幕产生烟花效果
!DOCTYPE?html
!--?saved?from?url=?--
html
headmeta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"
meta?content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"?name="viewport"
meta?name="apple-mobile-web-app-capable"?content="yes"
meta?name="apple-mobile-web-app-status-bar-style"?content="black"
title烟花/title
style?type="text/css"
html,body{height:100%;margin:0;padding:0}
ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
img{border:0}
body{background-color:#000;color:#999;font:100%/18px?helvetica,?arial,?sans-serif}
canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
#header?img{width:100%;?height:20%;}
#bg?img{width:100%;?height:80%;}
#header,#bg{position:fixed;left:0;right:0;z-index:10}
#header{top:0}
#bg{position:fixed;z-index:1;}
audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}
/style
link?rel="shortcut?icon"?type="image/x-icon"?href=""
style?type="text/css"/stylestyle?id="style-1-cropbar-clipper"
.en-markup-crop-options?{
????top:?18px?!important;
????left:?50%?!important;
????margin-left:?-100px?!important;
????width:?200px?!important;
????border:?2px?rgba(255,255,255,.38)?solid?!important;
????border-radius:?4px?!important;
}
.en-markup-crop-options?div?div:first-of-type?{
????margin-left:?0px?!important;
}
#.bg?{
background-color:?black;
}
/style
/head
body
div?id="bg"/div
script?src=""/script
script?type="text/javascript"
$(function(){
var?Fireworks?=?function(){
var?self?=?this;
var?rand?=?function(rMi,?rMa){return?~~((Math.random()*(rMa-rMi+1))+rMi);}
var?hitTest?=?function(x1,?y1,?w1,?h1,?x2,?y2,?w2,?h2){return?!(x1?+?w1??x2?||?x2?+?w2??x1?||?y1?+?h1??y2?||?y2?+?h2??y1);};
window.requestAnimFrame=function(){return?window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
self.init?=?function(){?
self.canvas?=?document.createElement('canvas');?????????????
self.canvas.width?=?self.cw?=?$(window).innerWidth();
self.canvas.height?=?self.ch?=?$(window).innerHeight();?????????
self.particles?=?[];????
self.partCount?=?150;
self.fireworks?=?[];????
self.mx?=?self.cw/2;
self.my?=?self.ch/2;
self.currentHue?=?30;
self.partSpeed?=?5;
self.partSpeedVariance?=?10;
self.partWind?=?50;
self.partFriction?=?5;
self.partGravity?=?1;
self.hueMin?=?0;
self.hueMax?=?360;
self.fworkSpeed?=?4;
self.fworkAccel?=?10;
self.hueVariance?=?30;
self.flickerDensity?=?25;
self.showShockwave?=?true;
self.showTarget?=?false;
self.clearAlpha?=?25;
$(document.body).append(self.canvas);
self.ctx?=?self.canvas.getContext('2d');
self.ctx.lineCap?=?'round';
self.ctx.lineJoin?=?'round';
self.lineWidth?=?1;
self.bindEvents();??????????
self.canvasLoop();
self.canvas.onselectstart?=?function()?{
return?false;
};
};??????
self.createParticles?=?function(x,y,?hue){
var?countdown?=?self.partCount;
while(countdown--){
var?newParticle?=?{
????x:?x,
????y:?y,
????coordLast:?[
????????{x:?x,?y:?y},
????????{x:?x,?y:?y},
????????{x:?x,?y:?y}
????],
????angle:?rand(0,?360),
????speed:?rand(((self.partSpeed?-?self.partSpeedVariance)?=?0)???1?:?self.partSpeed?-?self.partSpeedVariance,?(self.partSpeed?+?self.partSpeedVariance)),
????friction:?1?-?self.partFriction/100,
????gravity:?self.partGravity/2,
????hue:?rand(hue-self.hueVariance,?hue+self.hueVariance),
????brightness:?rand(50,?80),
????alpha:?rand(40,100)/100,
????decay:?rand(10,?50)/1000,
????wind:?(rand(0,?self.partWind)?-?(self.partWind/2))/25,
????lineWidth:?self.lineWidth
};??????????????
self.particles.push(newParticle);
}
};
self.updateParticles?=?function(){
var?i?=?self.particles.length;
while(i--){
var?p?=?self.particles[i];
var?radians?=?p.angle?*?Math.PI?/?180;
var?vx?=?Math.cos(radians)?*?p.speed;
var?vy?=?Math.sin(radians)?*?p.speed;
p.speed?*=?p.friction;
????????????????
p.coordLast[2].x?=?p.coordLast[1].x;
p.coordLast[2].y?=?p.coordLast[1].y;
p.coordLast[1].x?=?p.coordLast[0].x;
p.coordLast[1].y?=?p.coordLast[0].y;
p.coordLast[0].x?=?p.x;
p.coordLast[0].y?=?p.y;
p.x?+=?vx;
p.y?+=?vy;
p.y?+=?p.gravity;
p.angle?+=?p.wind;??????????????
p.alpha?-=?p.decay;
if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius,?p.y-p.radius,?p.radius*2,?p.radius*2)?||?p.alpha??.05){??????????????????
????self.particles.splice(i,?1);????
}
};
};
self.drawParticles?=?function(){
var?i?=?self.particles.length;
while(i--){
var?p?=?self.particles[i];??????????????????????????
var?coordRand?=?(rand(1,3)-1);
self.ctx.beginPath();???????????????????????????????
self.ctx.moveTo(Math.round(p.coordLast[coordRand].x),?Math.round(p.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(p.x),?Math.round(p.y));
self.ctx.closePath();???????????????
self.ctx.strokeStyle?=?'hsla('+p.hue+',?100%,?'+p.brightness+'%,?'+p.alpha+')';
self.ctx.stroke();??????????????
if(self.flickerDensity??0){
????var?inverseDensity?=?50?-?self.flickerDensity;??????????????????
????if(rand(0,?inverseDensity)?===?inverseDensity){
????????self.ctx.beginPath();
????????self.ctx.arc(Math.round(p.x),?Math.round(p.y),?rand(p.lineWidth,p.lineWidth+3)/2,?0,?Math.PI*2,?false)
????????self.ctx.closePath();
????????var?randAlpha?=?rand(50,100)/100;
????????self.ctx.fillStyle?=?'hsla('+p.hue+',?100%,?'+p.brightness+'%,?'+randAlpha+')';
????????self.ctx.fill();
????}???
}
};
};
self.createFireworks?=?function(startX,?startY,?targetX,?targetY){
var?newFirework?=?{
x:?startX,
y:?startY,
startX:?startX,
startY:?startY,
hitX:?false,
hitY:?false,
coordLast:?[
????{x:?startX,?y:?startY},
????{x:?startX,?y:?startY},
????{x:?startX,?y:?startY}
],
targetX:?targetX,
targetY:?targetY,
speed:?self.fworkSpeed,
angle:?Math.atan2(targetY?-?startY,?targetX?-?startX),
shockwaveAngle:?Math.atan2(targetY?-?startY,?targetX?-?startX)+(90*(Math.PI/180)),
acceleration:?self.fworkAccel/100,
hue:?self.currentHue,
brightness:?rand(50,?80),
alpha:?rand(50,100)/100,
lineWidth:?self.lineWidth
};??????????
self.fireworks.push(newFirework);
};
self.updateFireworks?=?function(){
var?i?=?self.fireworks.length;
while(i--){
var?f?=?self.fireworks[i];
self.ctx.lineWidth?=?f.lineWidth;
vx?=?Math.cos(f.angle)?*?f.speed,
vy?=?Math.sin(f.angle)?*?f.speed;
f.speed?*=?1?+?f.acceleration;??????????????
f.coordLast[2].x?=?f.coordLast[1].x;
f.coordLast[2].y?=?f.coordLast[1].y;
f.coordLast[1].x?=?f.coordLast[0].x;
f.coordLast[1].y?=?f.coordLast[0].y;
f.coordLast[0].x?=?f.x;
f.coordLast[0].y?=?f.y;
if(f.startX?=?f.targetX){
????if(f.x?+?vx?=?f.targetX){
????????f.x?=?f.targetX;
????????f.hitX?=?true;
????}?else?{
????????f.x?+=?vx;
????}
}?else?{
????if(f.x?+?vx?=?f.targetX){
????????f.x?=?f.targetX;
????????f.hitX?=?true;
????}?else?{
????????f.x?+=?vx;
????}
}
if(f.startY?=?f.targetY){
????if(f.y?+?vy?=?f.targetY){
????????f.y?=?f.targetY;
????????f.hitY?=?true;
????}?else?{
????????f.y?+=?vy;
????}
}?else?{
????if(f.y?+?vy?=?f.targetY){
????????f.y?=?f.targetY;
????????f.hitY?=?true;
????}?else?{
????????f.y?+=?vy;
????}
}???????????????
if(f.hitX??f.hitY){
????self.createParticles(f.targetX,?f.targetY,?f.hue);
????self.fireworks.splice(i,?1);
????
}
};
};
self.drawFireworks?=?function(){
var?i?=?self.fireworks.length;
self.ctx.globalCompositeOperation?=?'lighter';
while(i--){
var?f?=?self.fireworks[i];??????
self.ctx.lineWidth?=?f.lineWidth;
var?coordRand?=?(rand(1,3)-1);??????????????????
self.ctx.beginPath();???????????????????????????
self.ctx.moveTo(Math.round(f.coordLast[coordRand].x),?Math.round(f.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(f.x),?Math.round(f.y));
self.ctx.closePath();
self.ctx.strokeStyle?=?'hsla('+f.hue+',?100%,?'+f.brightness+'%,?'+f.alpha+')';
self.ctx.stroke();??
if(self.showTarget){
????self.ctx.save();
????self.ctx.beginPath();
????self.ctx.arc(Math.round(f.targetX),?Math.round(f.targetY),?rand(1,8),?0,?Math.PI*2,?false)
????self.ctx.closePath();
????self.ctx.lineWidth?=?1;
????self.ctx.stroke();
????self.ctx.restore();
}
????
if(self.showShockwave){
????self.ctx.save();
????self.ctx.translate(Math.round(f.x),?Math.round(f.y));
????self.ctx.rotate(f.shockwaveAngle);
????self.ctx.beginPath();
????self.ctx.arc(0,?0,?1*(f.speed/5),?0,?Math.PI,?true);
????self.ctx.strokeStyle?=?'hsla('+f.hue+',?100%,?'+f.brightness+'%,?'+rand(25,?60)/100+')';
????self.ctx.lineWidth?=?f.lineWidth;
????self.ctx.stroke();
????self.ctx.restore();
}
};
};
self.bindEvents?=?function(){
$(window).on('resize',?function(){??????????
clearTimeout(self.timeout);
self.timeout?=?setTimeout(function()?{
????self.canvas.width?=?self.cw?=?$(window).innerWidth();
????self.canvas.height?=?self.ch?=?$(window).innerHeight();
????self.ctx.lineCap?=?'round';
????self.ctx.lineJoin?=?'round';
},?100);
});
$(self.canvas).on('mousedown',?function(e){
self.mx?=?e.pageX?-?self.canvas.offsetLeft;
self.my?=?e.pageY?-?self.canvas.offsetTop;
self.currentHue?=?rand(self.hueMin,?self.hueMax);
self.createFireworks(self.cw/2,?self.ch,?self.mx,?self.my);?
$(self.canvas).on('mousemove.fireworks',?function(e){
????self.mx?=?e.pageX?-?self.canvas.offsetLeft;
????self.my?=?e.pageY?-?self.canvas.offsetTop;
????self.currentHue?=?rand(self.hueMin,?self.hueMax);
????self.createFireworks(self.cw/2,?self.ch,?self.mx,?self.my);?????????????????????????????????
});?????????????
});
$(self.canvas).on('mouseup',?function(e){
$(self.canvas).off('mousemove.fireworks');??????????????????????????????????
});
????????
}
self.clear?=?function(){
self.particles?=?[];
self.fireworks?=?[];
self.ctx.clearRect(0,?0,?self.cw,?self.ch);
};
self.canvasLoop?=?function(){
requestAnimFrame(self.canvasLoop,?self.canvas);?????????
self.ctx.globalCompositeOperation?=?'destination-out';
self.ctx.fillStyle?=?'rgba(0,0,0,'+self.clearAlpha/100+')';
self.ctx.fillRect(0,0,self.cw,self.ch);
self.updateFireworks();
self.updateParticles();
self.drawFireworks();???????????
self.drawParticles();
};
self.init();????????
}
var?fworks?=?new?Fireworks();
});
/script
script?type="text/javascript"
$(document).ready(function()?{
setTimeout(function()?{
$("#header").hide("slow");
},2000);
});
/script
/body
/html
放烟花的代码
放烟花的代码的操作步骤如下：
操作环境：华硕飞行堡垒、windows10家庭版、DreamweaverCS6。
1、打开Dreamweaver，新建HTML。
2、创建一个div标签，书写属性。
3、在＜body＞辩余内添加罩灶运js代码。
4、在＜script＞内添加js内容。
什么是电子烟花？
电子烟花是一种新型的电子产品，它有别于传统的装药烟花：
1、电子烟花是利用喷向空中的彩色纸屑反射彩色灯光结合哨子发出的啸叫声来产生火药烟花的燃放效果，可重复使用，没有硝烟，不产生垃圾，同样绚丽多姿。
2、利用电子激发普通空气爆炸，不使用火药和任何爆炸、燃烧药剂，也不使用任何燃烧助燃气体，在爆炸闪光过程中不产生烟雾，在爆炸、闪光过程中不伤人、不起火，并且能释放大量的负离子清洁空气。
3、电子烟花室内外都能用，有手持式、坐地式和多管式，均可同时使用。
qq放烟花代码
qq烟花代码javascript:window.top.space_addItem。
代码是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、便于识别与记忆、力求短小与格式统一以及容易修改等。
源代码是代码的分支，某种意义上来说，源代码相当于代码。现代程序语言中，源代码可以书籍或磁带形式出现，但最为常用格式是文本文件，这种典型格式的目的是为了编译出计算机程序。
计算机代码
源代码是相对目标代码和可执行代码而言的，源代码就是用汇编语言和高级语言写出来的地代码。目标代码是指源代码经过编译程序产生的能被cpu直接识别二进制代码。可执行代码就是将目标代码连接后形成的可执行文件，当然也是二进制的。
为数不少的初学者，甚至少数有经验的程序员都忽视软件说明的编写，因为这部分虽然不会在生成的程序中直接显示，也不参与编译。但是说明对软件的学习、分享、维护和软件复用都有巨大的好处。
微信烟花代码
微信烟花代码：
` wx.config({ debug: false, appId: '', timestamp: 0, nonceStr: '', signature: '', jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'onVoicePlayEnd', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard'] }); wx.ready(function () { wx.checkJsApi({ jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], success: function (res) { wx.onMenuShareTimeline({ title: '', // 分享标题 link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标 success: function () { $('.weixin-fireworks').fireworks({ sound: false, // sound effect opacity: 0.9, width: '100%', height: '100%' }); } }); } }); });`
拓展：
烟花代码是一种很有趣的特效，主要是使用jQuery插件来实现，可以在微信中实现一些烟花效果，这是一种很有趣的可视化效果，可以在微信中实现不同的烟花效果，比如烟花爆炸、烟花喷射等，可以给用户带来不同的视觉体验。