欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5 Canvas实现烟花绽放特效

程序员文章站 2022-10-15 18:04:40
这是一个款绚丽的HTML5 Canvas动画，它将模拟的是我们生活中烟花绽放的动画特效，效果非常逼真，下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码，感兴趣的小伙伴们可以参... 16-03-02...

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

效果如下：

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强大的效果惊呆了，一饱眼福了吧。

上一篇： 还在问入秋吃什么好？这三种食物必须了解！

下一篇： 多视角3D逼真HTML5水波动画

推荐阅读