返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

HTML5 Canvas实现烟花绽放特效

2019-01-28 15:24:37王旭

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

效果如下：

代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE HTML>   <html>  
  2.   <head>       <title>Canvas 实现放烟花特效</title>  
  3.  <meta charset="utf-8">       <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  4.     <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">       <style type="text/css">  
  5.   html,body{height:100%;margin:0;padding:0}      ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}   
  6.   img{border:0}      body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}   
  7.   canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}      #header img{width:100%; height:20%;}   
  8.   #bg img{width:100%; height:80%;}      #header,#bg{position:fixed;left:0;right:0;z-index:10}   
  9.   #header{top:0}      #bg{position:fixed;z-index:1;bottom:0}   
  10.   audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}     </style>  
  11.   </head>     <body>  
  12.  <div id="bg">     <img id="bgimg" src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006.jpg">  
  13.  </div>    <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>  
  14.  <script>     $(function(){   
  15.    var Fireworks = function(){        var self = this;   
  16.     // 产生烟花随机数        var rand = function(rMi, rMa){   
  17.      //按位取反运算符         return ~~((Math.random()*(rMa-rMi+1))+rMi);   
  18.     },hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){         return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);   
  19.     };        //请求动画帧   
  20.     window.requestAnimFrame=function(){         return window.requestAnimationFrame   
  21.       ||window.webkitRequestAnimationFrame          ||window.mozRequestAnimationFrame   
  22.       ||window.oRequestAnimationFrame          ||window.msRequestAnimationFrame   
  23.       ||function(callback){           window.setTimeout(callback,1000/60);   
  24.       }        }();   
  25.     self.init = function(){          self.canvas = document.createElement('canvas');     
  26.      //canvas 全屏         selfself.canvas.width = self.cw = $(window).innerWidth();   
  27.      selfself.canvas.height = self.ch = $(window).innerHeight();           self.particles = [];    
  28.      self.partCount = 150;         self.fireworks = [];    
  29.      selfself.mx = self.cw/2;         selfself.my = self.ch/2;   
  30.      self.currentHue = 30;         self.partSpeed = 5;   
  31.      self.partSpeedVariance = 10;         self.partWind = 50;   
  32.      self.partFriction = 5;         self.partGravity = 1;   
  33.      self.hueMin = 0;         self.hueMax = 360;   
  34.      self.fworkSpeed = 4;         self.fworkAccel = 10;   
  35.      self.hueVariance = 30;         self.flickerDensity = 25;   
  36.      self.showShockwave = true;         self.showTarget = false;   
  37.      self.clearAlpha = 25;         $(document.body).append(self.canvas);   
  38.      selfself.ctx = self.canvas.getContext('2d');         self.ctx.lineCap = 'round';   
  39.      self.ctx.lineJoin = 'round';         self.lineWidth = 1;   
  40.      self.bindEvents();            self.canvasLoop();   
  41.      self.canvas.onselectstart = function() {          return false;   
  42.      };        };     
  43.     // 创建粒子        self.createParticles = function(x,y, hue){   
  44.      var countdown = self.partCount;         while(countdown--){   
  45.       var newParticle = {           x: x,   
  46.        y: y,           coordLast: [   
  47.         {x: x, y: y},            {x: x, y: y},   
  48.         {x: x, y: y}           ],   
  49.        angle: rand(0, 360),           speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),   
  50.        friction: 1 - self.partFriction/100,           gravity: self.partGravity/2,   
  51.        hue: rand(hue-self.hueVariance, hue+self.hueVariance),           brightness: rand(50, 80),   
  52.        alpha: rand(40,100)/100,           decay: rand(10, 50)/1000,   
  53.        wind: (rand(0, self.partWind) - (self.partWind/2))/25,           lineWidth: self.lineWidth   
  54.       };              self.particles.push(newParticle);   
  55.      }        };   
  56.     // 更新粒子        self.updateParticles = function(){   
  57.      var i = self.particles.length;         while(i--){   
  58.       var p = self.particles[i];          var radians = p.angle * Math.PI / 180;   
  59.       var vx = Math.cos(radians) * p.speed;          var vy = Math.sin(radians) * p.speed;   
  60.       p.speed *= p.friction;          p.coordLast[2].x = p.coordLast[1].x;   
  61.       p.coordLast[2].y = p.coordLast[1].y;          p.coordLast[1].x = p.coordLast[0].x;   
  62.       p.coordLast[1].y = p.coordLast[0].y;          p.coordLast[0].x = p.x;   
  63.       p.coordLast[0].y = p.y;          p.x += vx;   
  64.       p.y += vy;          p.y += p.gravity;   
  65.       p.angle += p.wind;              p.alpha -= p.decay;   
  66.       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){                self.particles.splice(i, 1);    
  67.       }         };   
  68.     };        // 绘制粒子   
  69.     self.drawParticles = function(){         var i = self.particles.length;   
  70.      while(i--){          var p = self.particles[i];          
  71.       var coordRand = (rand(1,3)-1);          self.ctx.beginPath();           
  72.       self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));          self.ctx.lineTo(Math.round(p.x), Math.round(p.y));   
  73.       self.ctx.closePath();              self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';   
  74.       self.ctx.stroke();              if(self.flickerDensity > 0){   
  75.        var inverseDensity = 50 - self.flickerDensity;                if(rand(0, inverseDensity) === inverseDensity){   
  76.         self.ctx.beginPath();            self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)   
  77.         self.ctx.closePath();            var randrandAlpha = rand(50,100)/100;   
  78.         self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';            self.ctx.fill();   
  79.        }           }   
  80.      };        };   
  81.     // 创建烟花            self.createFireworks = function(startX, startY, targetX, targetY){   
  82.      var newFirework = {          x: startX,   
  83.       y: startY,          startX: startX,   
  84.       startY: startY,          hitX: false,   
  85.       hitY: false,          coordLast: [   
  86.        {x: startX, y: startY},           {x: startX, y: startY},   
  87.        {x: startX, y: startY}          ],   
  88.       targetX: targetX,          targetY: targetY,   
  89.       speed: self.fworkSpeed,          angle: Math.atan2(targetY - startY, targetX - startX),   
  90.       shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),          acceleration: self.fworkAccel/100,   
  91.       hue: self.currentHue,          brightness: rand(50, 80),   
  92.       alpha: rand(50,100)/100,          lineWidth: self.lineWidth   
  93.      };            self.fireworks.push(newFirework);   
  94.     };        // 更新烟花   
  95.     self.updateFireworks = function(){         var i = self.fireworks.length;   
  96.      while(i--){          var f = self.fireworks[i];   
  97.       self.ctx.lineWidth = f.lineWidth;          vx = Math.cos(f.angle) * f.speed,   
  98.       vy = Math.sin(f.angle) * f.speed;          f.speed *= 1 + f.acceleration;       
  99.       f.coordLast[2].x = f.coordLast[1].x;          f.coordLast[2].y = f.coordLast[1].y;   
  100.       f.coordLast[1].x = f.coordLast[0].x;          f.coordLast[1].y = f.coordLast[0].y;   
  101.       f.coordLast[0].x = f.x;          f.coordLast[0].y = f.y;   
  102.       if(f.startX >= f.targetX){           if(f.x + vx <= f.targetX){   
  103.         ff.x = f.targetX;            f.hitX = true;   
  104.        } else {            f.x += vx;   
  105.        }          } else {   
  106.        if(f.x + vx >= f.targetX){            ff.x = f.targetX;   
  107.         f.hitX = true;           } else {   
  108.         f.x += vx;           }   
  109.       }          if(f.startY >= f.targetY){   
  110.        if(f.y + vy <= f.targetY){            ff.y = f.targetY;   
  111.         f.hitY = true;           } else {   
  112.         f.y += vy;           }   
  113.       } else {           if(f.y + vy >= f.targetY){   
  114.         ff.y = f.targetY;            f.hitY = true;   
  115.        } else {            f.y += vy;   
  116.        }          }       
  117.       if(f.hitX && f.hitY){           self.createParticles(f.targetX, f.targetY, f.hue);   
  118.        self.fireworks.splice(i, 1);          }   
  119.      };        };   
  120.     // 绘制烟花        self.drawFireworks = function(){   
  121.      var i = self.fireworks.length;         self.ctx.globalCompositeOperation = 'lighter';   
  122.      while(i--){          var f = self.fireworks[i];     
  123.       self.ctx.lineWidth = f.lineWidth;          var coordRand = (rand(1,3)-1);        
  124.       self.ctx.beginPath();                 self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));   
  125.       self.ctx.lineTo(Math.round(f.x), Math.round(f.y));          self.ctx.closePath();   
  126.       self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';          self.ctx.stroke();    
  127.       if(self.showTarget){           self.ctx.save();   
  128.        self.ctx.beginPath();           self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)   
  129.        self.ctx.closePath();           self.ctx.lineWidth = 1;   
  130.        self.ctx.stroke();           self.ctx.restore();   
  131.       }          if(self.showShockwave){   
  132.        self.ctx.save();           self.ctx.translate(Math.round(f.x), Math.round(f.y));   
  133.        self.ctx.rotate(f.shockwaveAngle);           self.ctx.beginPath();   
  134.        self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);           self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';   
  135.        self.ctx.lineWidth = f.lineWidth;           self.ctx.stroke();   
  136.        self.ctx.restore();          }   
  137.      };        };   
  138.     // 绑定事件        self.bindEvents = function(){   
  139.      $(window).on('resize', function(){             clearTimeout(self.timeout);   
  140.       self.timeout = setTimeout(function() {           selfself.canvas.width = self.cw = $(window).innerWidth();   
  141.        selfself.canvas.height = self.ch = $(window).innerHeight();           self.ctx.lineCap = 'round';   
  142.        self.ctx.lineJoin = 'round';          }, 100);   
  143.      });         $(self.canvas).on('mousedown', function(e){   
  144.       self.mx = e.pageX - self.canvas.offsetLeft;          self.my = e.pageY - self.canvas.offsetTop;   
  145.       self.currentHue = rand(self.hueMin, self.hueMax);          self.createFireworks(self.cw/2, self.ch, self.mx, self.my);    
  146.       $(self.canvas).on('mousemove.fireworks', function(e){           self.mx = e.pageX - self.canvas.offsetLeft;   
  147.        self.my = e.pageY - self.canvas.offsetTop;           self.currentHue = rand(self.hueMin, self.hueMax);   
  148.        self.createFireworks(self.cw/2, self.ch, self.mx, self.my);                   });       
  149.      });         $(self.canvas).on('mouseup', function(e){   
  150.       $(self.canvas).off('mousemove.fireworks');                  });   
  151.     };        self.clear = function(){   
  152.      self.particles = [];         self.fireworks = [];   
  153.      self.ctx.clearRect(0, 0, self.cw, self.ch);        };   
  154.     self.canvasLoop = function(){         requestAnimFrame(self.canvasLoop, self.canvas);      
  155.      self.ctx.globalCompositeOperation = 'destination-out';         self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';   
  156.      self.ctx.fillRect(0,0,self.cw,self.ch);         self.updateFireworks();   
  157.      self.updateParticles();         self.drawFireworks();      
  158.      self.drawParticles();        };   
  159.     self.init();         }   
  160.    var fworks = new Fireworks();       $('#info-toggle').on('click', function(e){   
  161.     $('#info-inner').stop(false, true).slideToggle(100);        e.preventDefault();   
  162.    });       });   
  163.  </script>    <canvas width="1400" height="449"></canvas>  
  164.   </body>   </html>  
相关文章 大家在看