js烟花特效代码手机用(html5烟花特效代码)
Android在canvas中实现高性能的烟花/粒子特效
新年到了，本文将展示通过自定义view绘制烟花效果的案例，同时介绍一种优化canvas绘制时的性能的方法.
每点击一下屏幕会产生一枚烟花，烟花飞到最上空会炸裂成60~100个碎片，
同屏可能有上千个粒子在不停更新它的位置.
github
这时候功能基本实现了，剩下的就是将每一个烟花绘制在canvas上，通常我们会这样写
然而你会发现性能很糟糕,帧数随着粒子数的增加直线下降直到个位数，优化如下
some codes were from Daniel Shiffman
微信烟花代码html可复制吗
微信烟花代码html可复制。直接复制微信烟花运行代码，使用HBuilder和idea都可以，复制完成再创建一个html文件就可以在任意场合释放烟花。微信烟花是在微信聊天对话框发送烟花时，会在聊天界面上出现好看的全屏烟花。
微信表情烟花代码 微信怎么制作烟花表情特效
1、点击【我】选项，找到【设置】功能。
2、查看自己的版本是不是【8.0.0】版本。
3、下载好后，点击【表情图标】选项。
4、选择【烟花】图标，可以看到烟花特效。
5、最显著的变化：是表情不仅增加了3D元素，更“动”起来了：向好友发“烟花”，屏幕会出现烟花的动画，发送“炸弹”会模拟“炸开”的效果伴随手机一震。
裂开表情则完整呈现了从微笑到裂开的过程。在对话框内发送表情，可以看到微信表情动起来了。
微信红包烟花特效代码怎么弄
微信红包烟花特效代码步骤如下：
1、打开微信APP，在搜索模式输入迪士尼烟花红包封面。
2、找到2022抖音热门迪士尼城堡烟花这篇文章。
3、进入文章后，进入到微小店就可以在线获得了。
如何用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、电子烟花室内外都能用，有手持式、坐地式和多管式，均可同时使用。