HTML5 Canvas实现烟花绽放特效

前端技术 2023/09/09 HTML

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

效果如下：

代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   <head>  
  4.     <title>Canvas 实现放烟花特效</title>  
  5.  <meta charset=\"utf-8\">  
  6.     <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">  
  7.     <meta name=\"viewport\" content=\"width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no\">  
  8.     <style type=\"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%/18px helvetica, arial, sans-serif}   
  13.   canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}   
  14.   #header img{width:100%; height:20%;}   
  15.   #bg img{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.  <div id=\"bg\">  
  24.   <img id=\"bgimg\" src=\"http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006.jpg\">  
  25.  </div>  
  26.  <script src=\"http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js\"></script>  
  27.  <script>  
  28.   $(function(){   
  29.    var Fireworks = function(){   
  30.     var self = this;   
  31.     // 产生烟花随机数   
  32.     var rand = 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.      return window.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.       return false;   
  83.      };   
  84.     };     
  85.     // 创建粒子   
  86.     self.createParticles = function(x,y, hue){   
  87.      var countdown = self.partCount;   
  88.      while(countdown--){   
  89.       var newParticle = {   
  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.      var i = self.particles.length;   
  114.      while(i--){   
  115.       var p = self.particles[i];   
  116.       var radians = p.angle * Math.PI / 180;   
  117.       var vx = Math.cos(radians) * p.speed;   
  118.       var vy = 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.      var i = self.particles.length;   
  139.      while(i--){   
  140.       var p = self.particles[i];          
  141.       var coordRand = (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.        var inverseDensity = 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.         var randrandAlpha = 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.      var newFirework = {   
  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.      var i = self.fireworks.length;   
  191.      while(i--){   
  192.       var f = 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.      var i = self.fireworks.length;   
  242.      self.ctx.globalCompositeOperation = \'lighter\';   
  243.      while(i--){   
  244.       var f = self.fireworks[i];     
  245.       self.ctx.lineWidth = f.lineWidth;   
  246.       var coordRand = (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.    var fworks = new Fireworks();   
  320.    $(\'#info-toggle\').on(\'click\', function(e){   
  321.     $(\'#info-inner\').stop(false, true).slideToggle(100);   
  322.     e.preventDefault();   
  323.    });    
  324.   });   
  325.  </script>  
  326.  <canvas width=\"1400\" height=\"449\"></canvas>  
  327.   </body>  
  328. </html>  

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

本文地址：https://www.stayed.cn/item/23925

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案