快过年了，用JS让你的网页放烟花吧

 马上就要过春节了，大城市里依然是不准燃放烟花这种空气污染的东西的，想念小时候在自家院子里放花的快乐时光，大城市里的小朋友们是体会不到这种快乐了。但作为前端工程师，这难不倒我们，下面就教大家如何用JS在网页里放烟花。

十多年的新沂网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整新沂建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“新沂网站设计”,“新沂网站推广”以来，每个客户项目都认真落实执行。

在 codepen 里搜索 “fireworks” 可以搜到各种使用JS完成的烟花效果。我今天分享的代码，也是参考自其中一个。

这篇文章看完，保证你在任何平台，用任何语言都可以写出来放烟花的效果

如何实现的？

先创建一个Canvas

先新建一个和网页可视区大小一样的canvas，并且通过监听显示区的resize事件，来改变canvas的大小。

 
 
 
 
    
  
  
  
  
  1. var canvas = document.getElementById('myCanvas'); 
    2. 
  
  
  
  
  2. var context = canvas.getContext('2d'); 
    3. 
  
  
  
  
  3. function resizeCanvas() { 
    4. 
  
  
  
  
  4.     canvas.width = window.innerWidth; 
    5. 
  
  
  
  
  5.     canvas.height = window.innerHeight; 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. function clearCanvas(){ 
    8. 
  
  
  
  
  8.  context.fillStyle = '#ffffff'; 
    9. 
  
  
  
  
  9.  context.fillRect(0,0,canvas.width, canvas.height); 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11. window.addEventListener('resize', resizeCanvas, false); 
    12. 
  
  
  
  
  12. resizeCanvas();
    13.

放烟花之前的练习

烟花都是从一个点爆炸，伴随着不同的弧度散开，所以我们先绘制几个小圆点，环绕着一个圆心。有点像loading的小圈圈。这其实就是烟花最开始的状态...

 
 
 
 
    
  
  
  
  
  1. function mouseDownHandler(e) { 
    2. 
  
  
  
  
  2.     var x = e.clientX; 
    3. 
  
  
  
  
  3.     var y = e.clientY; 
    4. 
  
  
  
  
  4.     drawFireworks(x,y); 
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. function drawFireworks(sx,sy) { 
    7. 
  
  
  
  
  7.     var count = 10;//烟花粒子数量 
    8. 
  
  
  
  
  8.     var radius = 10;//烟花环绕半径 
    9. 
  
  
  
  
  9.     for(var i = 0 ;i
  
  
  
  
  10.         var angle = 360/count*i;//烟花粒子角度 
    11. 
  
  
  
  
  11.         var radians = angle * Math.PI / 180;//烟花粒子弧度 
    12. 
  
  
  
  
  12.         var vx = sx+Math.cos(radians) * radius; 
    13. 
  
  
  
  
  13.         var vy = sy+Math.sin(radians) * radius; 
    14. 
  
  
  
  
  14.         var size = 2; 
    15. 
  
  
  
  
  15.         context.beginPath(); 
    16. 
  
  
  
  
  16.         context.arc(vx, vy, size, 0, Math.PI*2, false) 
    17. 
  
  
  
  
  17.         context.closePath(); 
    18. 
  
  
  
  
  18.         context.fillStyle = "#ff0000"; 
    19. 
  
  
  
  
  19.         context.fill(); 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21. }
    22. 
  
  
  
  
  22. document.addEventListener('mousedown', mouseDownHandler, false);
    23.

以上代码的含义大家应该都懂对不对？但现在没有动画，一点也不像烟花。别着急，我们马上就让它们动起来。

动起来

动起来其实就是不断的去绘制一个值从小变大的圆心半径...能明白吧，不断的绘制有两种方法，setInterval和requestAnimationFrame，两种方法都可以。

    1.  setInterval

优点：可以比较容易的设定动画的绘制频率。

 
 
 
 
    
  
  
  
  
  1. var radius = 0;//圆心半径 
    2. 
  
  
  
  
  2. function fire(x,y){ 
    3. 
  
  
  
  
  3.     function tick() { 
    4. 
  
  
  
  
  4.         drawFireworks(x,y);//绘制烟花 
    5. 
  
  
  
  
  5.         radius++;//半径不断变大 
    6. 
  
  
  
  
  6.     } 
    7. 
  
  
  
  
  7.     setInterval(tick,30);//每30毫秒绘制一次 
    8. 
  
  
  
  
  8. }
    9.

   2.  requestAnimationFrame

优点：绘制频率跟浏览器画面的绘制同步。

 
 
 
 
    
  
  
  
  
  1. var radius = 0; 
    2. 
  
  
  
  
  2. function fire(x,y){ 
    3. 
  
  
  
  
  3.     function tick() { 
    4. 
  
  
  
  
  4.         drawFireworks(x,y); 
    5. 
  
  
  
  
  5.         radius++; 
    6. 
  
  
  
  
  6.         requestAnimationFrame(tick); 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8.     tick();
    9. 
  
  
  
  
  9. }
    10.

是不是已经有点感觉了？

更像烟花一点

但真实的烟花肯定不会这么听话，规规矩矩的保持弧度和速度，所以我们要加入一些随机因子。

 
 
 
 
    
  
  
  
  
  1. var rid; 
    2. 
  
  
  
  
  2. function fire(x,y){ 
    3. 
  
  
  
  
  3.     createFireworks(x,y); 
    4. 
  
  
  
  
  4.     function tick() { 
    5. 
  
  
  
  
  5.         drawFireworks(); 
    6. 
  
  
  
  
  6.         rid=requestAnimationFrame(tick); 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8.     cancelAnimationFrame(rid);
    9. 
  
  
  
  
  9.     tick(); 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11. var particles=[]; 
    12. 
  
  
  
  
  12. function createFireworks(sx,sy){ 
    13. 
  
  
  
  
  13.     particles=[]; 
    14. 
  
  
  
  
  14.     var hue = Math.floor(Math.random()*51)+150; 
    15. 
  
  
  
  
  15.     var hueVariance = 30; 
    16. 
  
  
  
  
  16.     var count = 100; 
    17. 
  
  
  
  
  17.     for(var i = 0 ;i
  
  
  
  
  18.         var p = {}; 
    19. 
  
  
  
  
  19.         var angle = Math.floor(Math.random()*360); 
    20. 
  
  
  
  
  20.         p.radians = angle * Math.PI / 180; 
    21. 
  
  
  
  
  21.         p.radius = 0; 
    22. 
  
  
  
  
  22.         p.sx = sx; 
    23. 
  
  
  
  
  23.         p.sy = sy; 
    24. 
  
  
  
  
  24.         p.speed = (Math.random()*5)+.4; 
    25. 
  
  
  
  
  25.         p.size = Math.floor(Math.random()*3)+1; 
    26. 
  
  
  
  
  26.         p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance); 
    27. 
  
  
  
  
  27.         p.brightness = Math.floor(Math.random()*31)+50; 
    28. 
  
  
  
  
  28.         p.alpha = (Math.floor(Math.random()*61)+40)/100; 
    29. 
  
  
  
  
  29.         particles.push(p); 
    30. 
  
  
  
  
  30.     } 
    31. 
  
  
  
  
  31. } 
    32. 
  
  
  
  
  32. function drawFireworks() { 
    33. 
  
  
  
  
  33.     clearCanvas(); 
    34. 
  
  
  
  
  34.     for(var i = 0 ;i
  
  
  
  
  35.         var p = particles[i]; 
    36. 
  
  
  
  
  36.         pp.vx = p.sx+Math.cos(p.radians) * p.radius; 
    37. 
  
  
  
  
  37.         pp.vy = p.sy+Math.sin(p.radians) * p.radius; 
    38. 
  
  
  
  
  38.         p.radius += 1+p.speed; 
    39. 
  
  
  
  
  39.         context.beginPath(); 
    40. 
  
  
  
  
  40.         context.arc(p.vx, p.vy, p.size, 0, Math.PI*2, false); 
    41. 
  
  
  
  
  41.         context.closePath(); 
    42. 
  
  
  
  
  42.         context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+100+')'; 
    43. 
  
  
  
  
  43.         context.fill(); 
    44. 
  
  
  
  
  44.     } 
    45. 
  
  
  
  
  45. }
    46.

很绚丽的对不对？现在我们再给它加入一点烟雾拖尾的效果~

 
 
 
 
    
  
  
  
  
  1. function tick() { 
    2. 
  
  
  
  
  2.  //tips:注意新加入的这4行代码 
    3. 
  
  
  
  
  3.  context.globalCompositeOperation = 'destination-out'; 
    4. 
  
  
  
  
  4.  context.fillStyle = 'rgba(0,0,0,'+10/100+')'; 
    5. 
  
  
  
  
  5.  context.fillRect(0,0,canvas.width,canvas.height); 
    6. 
  
  
  
  
  6.  context.globalCompositeOperation = 'lighter'; 
    7. 
  
  
  
  
  7.  //tipsend 
    8. 
  
  
  
  
  8.  drawFireworks(); 
    9. 
  
  
  
  
  9.  rid=requestAnimationFrame(tick); 
    10. 
  
  
  
  
  10. }
    11.

为了更写实，我们继续升级

现在加入一些重力的影响，让烟花粒子的移动速度越来越慢并且慢慢下落消失

 
 
 
 
    
  
  
  
  
  1. var vx = Math.cos(p.radians) * p.radius; 
    2. 
  
  
  
  
  2. var vy = Math.sin(p.radians) * p.radius + 0.4; 
    3. 
  
  
  
  
  3. p.x += vx; 
    4. 
  
  
  
  
  4. p.y += vy; 
    5. 
  
  
  
  
  5. p.radius *= 1 - p.speed/100; 
    6. 
  
  
  
  
  6. p.alpha -= 0.005;
    7.

现在这个烟花看起来是不是就很有烟花的感觉了，当然各种参数你还可以更细致的加入一些变量。比如绘制一个炮竹，从炮竹处向天空发射。最后才是烟花...这些就交给大家自己去实现吧。

在任意网页上放烟花

在Chrome里新建一个书签，复制以下代码，粘贴到网址一栏，然后保存。

 
 
 
 
    
  
  
  
  
  1. javascript:!(function() {var cdom = document.createElement("canvas");cdom.id = "myCanvas";cdom.style.position="fixed";cdom.style.left = "0";cdom.style.top = "0";cdom.style.zIndex=-1;document.body.appendChild(cdom);var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}window.addEventListener('resize', resizeCanvas, false);resizeCanvas();clearCanvas();function clearCanvas(){context.fillStyle = '#000000';context.fillRect(0,0,canvas.width, canvas.height);}function mouseDownHandler(e) {var x = e.clientX;var y = e.clientY;fire(x,y);}var rid;function fire(x,y){createFireworks(x,y);function tick() {context.globalCompositeOperation = 'destination-out';    context.fillStyle = 'rgba(0,0,0,'+10/100+')';    context.fillRect(0,0,canvas.width,canvas.height);    context.globalCompositeOperation = 'lighter';drawFireworks();rid=requestAnimationFrame(tick);}cancelAnimationFrame(rid);tick();}var particles=[];function createFireworks(sx,sy){particles=[];var hue = Math.floor(Math.random()*51)+150;var hueVariance = 30;var count = 100;for(var i = 0 ;i

当前文章：快过年了，用JS让你的网页放烟花吧
本文链接：http://www.hantingmc.com/qtweb/news25/44875.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

做网站知识

各行业网站

网站制作　　 　成都广告公司　　 　成都搅拌罐车　　 　租用服务器　　 　网站SEO优化　　 　成都网站推广　　 　中国电信成都枢纽中心　　 　成都响应式网站建设　　 　关键词优化排名　　 　艾名斯智能　　 　兴发搬家　　 　四川门窗　　 　响应式网站建设公司　　 　宜宾冠赛网站　　 　广告媒介投放　　 　四川晃众门窗　　 　网页改版　　 　云服务器　　 　广安网站制作公司　　 　重庆网站建设