• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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 Logo动画
    下一篇：HTML5的新特性(1)
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯

    时间：9:00-21:00 (节假日不休)

    地址：江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    HTML5 Canvas实现烟花绽放特效 HTML5,Canvas,实现,烟花,绽放,