HTML5 Canvas如何实现烟花绽放特效

互联网
雪花在空中嬉戏着、飞舞着，它净化了世间的一切尘埃，送走了严冬的寂寞，它自由地来，潇洒地去，多少著名的诗词都赞美过它： "忽如一夜春风来，千树万树梨花开 "，多么俏丽呀！ "瑞雪兆丰年 "，它还是丰收的预言家呢！

本文为大家带来了一款，免费而又安全环保的HTML5 Canvas实现的放烟花特效。

效果如下：

代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEHTML>
  2. <html>
  3. <head>
  4. <title>Canvas实现放烟花特效</title>
  5. <metacharset="utf-8">
  6. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  7. <metaname="viewport"content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
  8. <styletype="text/css">
  9. html,body{height:100%;margin:0;padding:0}
  10. ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
  11. img{border:0}
  12. body{background-color:#000;color:#999;font:100%/18pxhelvetica,arial,sans-serif}
  13. canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
  14. #headerimg{width:100%;height:20%;}
  15. #bgimg{width:100%;height:80%;}
  16. #header,#bg{position:fixed;left:0;right:0;z-index:10}
  17. #header{top:0}
  18. #bg{position:fixed;z-index:1;bottom:0}
  19. audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}
  20. </style>
  21. </head>
  22. <body>
  23. <divid="bg">
  24. <imgid="bgimg"src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006.jpg">
  25. </div>
  26. <scriptsrc="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
  27. <script>
  28. $(function(){
  29. varFireworks=function(){
  30. varself=this;
  31. //产生烟花随机数
  32. varrand=function(rMi,rMa){
  33. //按位取反运算符
  34. return~~((Math.random()*(rMa-rMi+1))+rMi);
  35. },hitTest=function(x1,y1,w1,h1,x2,y2,w2,h2){
  36. return!(x1+w1<x2||x2+w2<x1||y1+h1<y2||y2+h2<y1);
  37. };
  38. //请求动画帧
  39. window.requestAnimFrame=function(){
  40. returnwindow.requestAnimationFrame
  41. ||window.webkitRequestAnimationFrame
  42. ||window.mozRequestAnimationFrame
  43. ||window.oRequestAnimationFrame
  44. ||window.msRequestAnimationFrame
  45. ||function(callback){
  46. window.setTimeout(callback,1000/60);
  47. }
  48. }();
  49. self.init=function(){
  50. self.canvas=document.createElement('canvas');
  51. //canvas全屏
  52. selfself.canvas.width=self.cw=$(window).innerWidth();
  53. selfself.canvas.height=self.ch=$(window).innerHeight();
  54. self.particles=[];
  55. self.partCount=150;
  56. self.fireworks=[];
  57. selfself.mx=self.cw/2;
  58. selfself.my=self.ch/2;
  59. self.currentHue=30;
  60. self.partSpeed=5;
  61. self.partSpeedVariance=10;
  62. self.partWind=50;
  63. self.partFriction=5;
  64. self.partGravity=1;
  65. self.hueMin=0;
  66. self.hueMax=360;
  67. self.fworkSpeed=4;
  68. self.fworkAccel=10;
  69. self.hueVariance=30;
  70. self.flickerDensity=25;
  71. self.showShockwave=true;
  72. self.showTarget=false;
  73. self.clearAlpha=25;
  74. $(document.body).append(self.canvas);
  75. selfself.ctx=self.canvas.getContext('2d');
  76. self.ctx.lineCap='round';
  77. self.ctx.lineJoin='round';
  78. self.lineWidth=1;
  79. self.bindEvents();
  80. self.canvasLoop();
  81. self.canvas.onselectstart=function(){
  82. returnfalse;
  83. };
  84. };
  85. //创建粒子
  86. self.createParticles=function(x,y,hue){
  87. varcountdown=self.partCount;
  88. while(countdown--){
  89. varnewParticle={
  90. x:x,
  91. y:y,
  92. coordLast:[
  93. {x:x,y:y},
  94. {x:x,y:y},
  95. {x:x,y:y}
  96. ],
  97. angle:rand(0,360),
  98. speed:rand(((self.partSpeed-self.partSpeedVariance)<=0)?1:self.partSpeed-self.partSpeedVariance,(self.partSpeed+self.partSpeedVariance)),
  99. friction:1-self.partFriction/100,
  100. gravity:self.partGravity/2,
  101. hue:rand(hue-self.hueVariance,hue+self.hueVariance),
  102. brightness:rand(50,80),
  103. alpha:rand(40,100)/100,
  104. decay:rand(10,50)/1000,
  105. wind:(rand(0,self.partWind)-(self.partWind/2))/25,
  106. lineWidth:self.lineWidth
  107. };
  108. self.particles.push(newParticle);
  109. }
  110. };
  111. //更新粒子
  112. self.updateParticles=function(){
  113. vari=self.particles.length;
  114. while(i--){
  115. varp=self.particles[i];
  116. varradians=p.angle*Math.PI/180;
  117. varvx=Math.cos(radians)*p.speed;
  118. varvy=Math.sin(radians)*p.speed;
  119. p.speed*=p.friction;
  120. p.coordLast[2].x=p.coordLast[1].x;
  121. p.coordLast[2].y=p.coordLast[1].y;
  122. p.coordLast[1].x=p.coordLast[0].x;
  123. p.coordLast[1].y=p.coordLast[0].y;
  124. p.coordLast[0].x=p.x;
  125. p.coordLast[0].y=p.y;
  126. p.x+=vx;
  127. p.y+=vy;
  128. p.y+=p.gravity;
  129. p.angle+=p.wind;
  130. p.alpha-=p.decay;
  131. 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){
  132. self.particles.splice(i,1);
  133. }
  134. };
  135. };
  136. //绘制粒子
  137. self.drawParticles=function(){
  138. vari=self.particles.length;
  139. while(i--){
  140. varp=self.particles[i];
  141. varcoordRand=(rand(1,3)-1);
  142. self.ctx.beginPath();
  143. self.ctx.moveTo(Math.round(p.coordLast[coordRand].x),Math.round(p.coordLast[coordRand].y));
  144. self.ctx.lineTo(Math.round(p.x),Math.round(p.y));
  145. self.ctx.closePath();
  146. self.ctx.strokeStyle='hsla('+p.hue+',100%,'+p.brightness+'%,'+p.alpha+')';
  147. self.ctx.stroke();
  148. if(self.flickerDensity>0){
  149. varinverseDensity=50-self.flickerDensity;
  150. if(rand(0,inverseDensity)===inverseDensity){
  151. self.ctx.beginPath();
  152. self.ctx.arc(Math.round(p.x),Math.round(p.y),rand(p.lineWidth,p.lineWidth+3)/2,0,Math.PI*2,false)
  153. self.ctx.closePath();
  154. varrandrandAlpha=rand(50,100)/100;
  155. self.ctx.fillStyle='hsla('+p.hue+',100%,'+p.brightness+'%,'+randAlpha+')';
  156. self.ctx.fill();
  157. }
  158. }
  159. };
  160. };
  161. //创建烟花
  162. self.createFireworks=function(startX,startY,targetX,targetY){
  163. varnewFirework={
  164. x:startX,
  165. y:startY,
  166. startX:startX,
  167. startY:startY,
  168. hitX:false,
  169. hitY:false,
  170. coordLast:[
  171. {x:startX,y:startY},
  172. {x:startX,y:startY},
  173. {x:startX,y:startY}
  174. ],
  175. targetX:targetX,
  176. targetY:targetY,
  177. speed:self.fworkSpeed,
  178. angle:Math.atan2(targetY-startY,targetX-startX),
  179. shockwaveAngle:Math.atan2(targetY-startY,targetX-startX)+(90*(Math.PI/180)),
  180. acceleration:self.fworkAccel/100,
  181. hue:self.currentHue,
  182. brightness:rand(50,80),
  183. alpha:rand(50,100)/100,
  184. lineWidth:self.lineWidth
  185. };
  186. self.fireworks.push(newFirework);
  187. };
  188. //更新烟花
  189. self.updateFireworks=function(){
  190. vari=self.fireworks.length;
  191. while(i--){
  192. varf=self.fireworks[i];
  193. self.ctx.lineWidth=f.lineWidth;
  194. vx=Math.cos(f.angle)*f.speed,
  195. vy=Math.sin(f.angle)*f.speed;
  196. f.speed*=1+f.acceleration;
  197. f.coordLast[2].x=f.coordLast[1].x;
  198. f.coordLast[2].y=f.coordLast[1].y;
  199. f.coordLast[1].x=f.coordLast[0].x;
  200. f.coordLast[1].y=f.coordLast[0].y;
  201. f.coordLast[0].x=f.x;
  202. f.coordLast[0].y=f.y;
  203. if(f.startX>=f.targetX){
  204. if(f.x+vx<=f.targetX){
  205. ff.x=f.targetX;
  206. f.hitX=true;
  207. }else{
  208. f.x+=vx;
  209. }
  210. }else{
  211. if(f.x+vx>=f.targetX){
  212. ff.x=f.targetX;
  213. f.hitX=true;
  214. }else{
  215. f.x+=vx;
  216. }
  217. }
  218. if(f.startY>=f.targetY){
  219. if(f.y+vy<=f.targetY){
  220. ff.y=f.targetY;
  221. f.hitY=true;
  222. }else{
  223. f.y+=vy;
  224. }
  225. }else{
  226. if(f.y+vy>=f.targetY){
  227. ff.y=f.targetY;
  228. f.hitY=true;
  229. }else{
  230. f.y+=vy;
  231. }
  232. }
  233. if(f.hitX&&f.hitY){
  234. self.createParticles(f.targetX,f.targetY,f.hue);
  235. self.fireworks.splice(i,1);
  236. }
  237. };
  238. };
  239. //绘制烟花
  240. self.drawFireworks=function(){
  241. vari=self.fireworks.length;
  242. self.ctx.globalCompositeOperation='lighter';
  243. while(i--){
  244. varf=self.fireworks[i];
  245. self.ctx.lineWidth=f.lineWidth;
  246. varcoordRand=(rand(1,3)-1);
  247. self.ctx.beginPath();
  248. self.ctx.moveTo(Math.round(f.coordLast[coordRand].x),Math.round(f.coordLast[coordRand].y));
  249. self.ctx.lineTo(Math.round(f.x),Math.round(f.y));
  250. self.ctx.closePath();
  251. self.ctx.strokeStyle='hsla('+f.hue+',100%,'+f.brightness+'%,'+f.alpha+')';
  252. self.ctx.stroke();
  253. if(self.showTarget){
  254. self.ctx.save();
  255. self.ctx.beginPath();
  256. self.ctx.arc(Math.round(f.targetX),Math.round(f.targetY),rand(1,8),0,Math.PI*2,false)
  257. self.ctx.closePath();
  258. self.ctx.lineWidth=1;
  259. self.ctx.stroke();
  260. self.ctx.restore();
  261. }
  262. if(self.showShockwave){
  263. self.ctx.save();
  264. self.ctx.translate(Math.round(f.x),Math.round(f.y));
  265. self.ctx.rotate(f.shockwaveAngle);
  266. self.ctx.beginPath();
  267. self.ctx.arc(0,0,1*(f.speed/5),0,Math.PI,true);
  268. self.ctx.strokeStyle='hsla('+f.hue+',100%,'+f.brightness+'%,'+rand(25,60)/100+')';
  269. self.ctx.lineWidth=f.lineWidth;
  270. self.ctx.stroke();
  271. self.ctx.restore();
  272. }
  273. };
  274. };
  275. //绑定事件
  276. self.bindEvents=function(){
  277. $(window).on('resize',function(){
  278. clearTimeout(self.timeout);
  279. self.timeout=setTimeout(function(){
  280. selfself.canvas.width=self.cw=$(window).innerWidth();
  281. selfself.canvas.height=self.ch=$(window).innerHeight();
  282. self.ctx.lineCap='round';
  283. self.ctx.lineJoin='round';
  284. },100);
  285. });
  286. $(self.canvas).on('mousedown',function(e){
  287. self.mx=e.pageX-self.canvas.offsetLeft;
  288. self.my=e.pageY-self.canvas.offsetTop;
  289. self.currentHue=rand(self.hueMin,self.hueMax);
  290. self.createFireworks(self.cw/2,self.ch,self.mx,self.my);
  291. $(self.canvas).on('mousemove.fireworks',function(e){
  292. self.mx=e.pageX-self.canvas.offsetLeft;
  293. self.my=e.pageY-self.canvas.offsetTop;
  294. self.currentHue=rand(self.hueMin,self.hueMax);
  295. self.createFireworks(self.cw/2,self.ch,self.mx,self.my);
  296. });
  297. });
  298. $(self.canvas).on('mouseup',function(e){
  299. $(self.canvas).off('mousemove.fireworks');
  300. });
  301. };
  302. self.clear=function(){
  303. self.particles=[];
  304. self.fireworks=[];
  305. self.ctx.clearRect(0,0,self.cw,self.ch);
  306. };
  307. self.canvasLoop=function(){
  308. requestAnimFrame(self.canvasLoop,self.canvas);
  309. self.ctx.globalCompositeOperation='destination-out';
  310. self.ctx.fillStyle='rgba(0,0,0,'+self.clearAlpha/100+')';
  311. self.ctx.fillRect(0,0,self.cw,self.ch);
  312. self.updateFireworks();
  313. self.updateParticles();
  314. self.drawFireworks();
  315. self.drawParticles();
  316. };
  317. self.init();
  318. }
  319. varfworks=newFireworks();
  320. $('#info-toggle').on('click',function(e){
  321. $('#info-inner').stop(false,true).slideToggle(100);
  322. e.preventDefault();
  323. });
  324. });
  325. </script>
  326. <canvaswidth="1400"height="449"></canvas>
  327. </body>
  328. </html>

是不是被HTML5强大的效果惊呆了，一饱眼福了吧。

到此这篇关于HTML5 Canvas如何实现烟花绽放特效就介绍到这了。与积极的人在一起，可以让我们心情高昂。更多相关HTML5 Canvas如何实现烟花绽放特效内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
HTML5之高度塌陷问题的如何解决
html5笛卡尔心形曲线的如何实现
如何使用feDisplacementMap+feImage滤镜如何实现水波纹效果(计算动态值)
如何使用canvas对video视频某一刻截图功能
Canvas如何做个雪花屏版404的如何实现