HTML5 Canvas实现烟花绽放特效
来源: 阅读:2615 次 日期:2016-07-07 13:53:45
温馨提示: 小编为您整理了“HTML5 Canvas实现烟花绽放特效”,方便广大网友查阅!

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

效果如下:

名单

代码如下:

XML/HTML Code

<!DOCTYPE HTML>  

<html>  

  <head>  

    <title>Canvas 实现放烟花特效</title>  

 <meta charset="utf-8">  

    <meta http-equiv="X-UA-Compatible" content="IE=edge">  

    <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">  

  html,body{height:100%;margin:0;padding:0}   

  ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}   

  img{border:0}   

  body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}   

  canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}   

  #header img{width:100%; height:20%;}   

  #bg img{width:100%; height:80%;}   

  #header,#bg{position:fixed;left:0;right:0;z-index:10}   

  #header{top:0}   

  #bg{position:fixed;z-index:1;bottom:0}   

  audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}   

 </style>  

  </head>  

  <body>  

 <div id="bg">  

  <img id="bgimg" src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006.jpg">  

 </div>  

 <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>  

 <script>  

  $(function(){   

   var Fireworks = function(){   

    var self = this;   

    // 产生烟花随机数   

    var rand = function(rMi, rMa){   

     //按位取反运算符   

     return ~~((Math.random()*(rMa-rMi+1))+rMi);   

    },hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){   

     return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);   

    };   

    //请求动画帧   

    window.requestAnimFrame=function(){   

     return window.requestAnimationFrame   

      ||window.webkitRequestAnimationFrame   

      ||window.mozRequestAnimationFrame   

      ||window.oRequestAnimationFrame   

      ||window.msRequestAnimationFrame   

      ||function(callback){   

       window.setTimeout(callback,1000/60);   

      }   

    }();   

    self.init = function(){    

     self.canvas = document.createElement('canvas');     

     //canvas 全屏   

     selfself.canvas.width = self.cw = $(window).innerWidth();   

     selfself.canvas.height = self.ch = $(window).innerHeight();     

     self.particles = [];    

     self.partCount = 150;   

     self.fireworks = [];    

     selfself.mx = self.cw/2;   

     selfself.my = self.ch/2;   

     self.currentHue = 30;   

     self.partSpeed = 5;   

     self.partSpeedVariance = 10;   

     self.partWind = 50;   

     self.partFriction = 5;   

     self.partGravity = 1;   

     self.hueMin = 0;   

     self.hueMax = 360;   

     self.fworkSpeed = 4;   

     self.fworkAccel = 10;   

     self.hueVariance = 30;   

     self.flickerDensity = 25;   

     self.showShockwave = true;   

     self.showTarget = false;   

     self.clearAlpha = 25;   

     $(document.body).append(self.canvas);   

     selfself.ctx = self.canvas.getContext('2d');   

     self.ctx.lineCap = 'round';   

     self.ctx.lineJoin = 'round';   

     self.lineWidth = 1;   

     self.bindEvents();      

     self.canvasLoop();   

     self.canvas.onselectstart = function() {   

      return false;   

     };   

    };     

    // 创建粒子   

    self.createParticles = function(x,y, hue){   

     var countdown = self.partCount;   

     while(countdown--){   

      var newParticle = {   

       x: x,   

       y: y,   

       coordLast: [   

        {x: x, y: y},   

        {x: x, y: y},   

        {x: x, y: y}   

       ],   

       angle: rand(0, 360),   

       speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),   

       friction: 1 - self.partFriction/100,   

       gravity: self.partGravity/2,   

       hue: rand(hue-self.hueVariance, hue+self.hueVariance),   

       brightness: rand(50, 80),   

       alpha: rand(40,100)/100,   

       decay: rand(10, 50)/1000,   

       wind: (rand(0, self.partWind) - (self.partWind/2))/25,   

       lineWidth: self.lineWidth   

      };       

      self.particles.push(newParticle);   

     }   

    };   

    // 更新粒子   

    self.updateParticles = function(){   

     var i = self.particles.length;   

     while(i--){   

      var p = self.particles[i];   

      var radians = p.angle * Math.PI / 180;   

      var vx = Math.cos(radians) * p.speed;   

      var vy = Math.sin(radians) * p.speed;   

      p.speed *= p.friction;   

      p.coordLast[2].x = p.coordLast[1].x;   

      p.coordLast[2].y = p.coordLast[1].y;   

      p.coordLast[1].x = p.coordLast[0].x;   

      p.coordLast[1].y = p.coordLast[0].y;   

      p.coordLast[0].x = p.x;   

      p.coordLast[0].y = p.y;   

      p.x += vx;   

      p.y += vy;   

      p.y += p.gravity;   

      p.angle += p.wind;       

      p.alpha -= p.decay;   

      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);    

      }   

     };   

    };   

    // 绘制粒子   

    self.drawParticles = function(){   

     var i = self.particles.length;   

     while(i--){   

      var p = self.particles[i];          

      var coordRand = (rand(1,3)-1);   

      self.ctx.beginPath();           

      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));   

      self.ctx.closePath();       

      self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';   

      self.ctx.stroke();       

      if(self.flickerDensity > 0){   

       var inverseDensity = 50 - self.flickerDensity;        

       if(rand(0, inverseDensity) === inverseDensity){   

        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)   

        self.ctx.closePath();   

        var randrandAlpha = rand(50,100)/100;   

        self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';   

        self.ctx.fill();   

       }    

      }   

     };   

    };   

    // 创建烟花       

    self.createFireworks = function(startX, startY, targetX, targetY){   

     var newFirework = {   

      x: startX,   

      y: startY,   

      startX: startX,   

      startY: startY,   

      hitX: false,   

      hitY: false,   

      coordLast: [   

       {x: startX, y: startY},   

       {x: startX, y: startY},   

       {x: startX, y: startY}   

      ],   

      targetX: targetX,   

      targetY: targetY,   

      speed: self.fworkSpeed,   

      angle: Math.atan2(targetY - startY, targetX - startX),   

      shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),   

      acceleration: self.fworkAccel/100,   

      hue: self.currentHue,   

      brightness: rand(50, 80),   

      alpha: rand(50,100)/100,   

      lineWidth: self.lineWidth   

     };      

     self.fireworks.push(newFirework);   

    };   

    // 更新烟花   

    self.updateFireworks = function(){   

     var i = self.fireworks.length;   

     while(i--){   

      var f = self.fireworks[i];   

      self.ctx.lineWidth = f.lineWidth;   

      vx = Math.cos(f.angle) * f.speed,   

      vy = Math.sin(f.angle) * f.speed;   

      f.speed *= 1 + f.acceleration;       

      f.coordLast[2].x = f.coordLast[1].x;   

      f.coordLast[2].y = f.coordLast[1].y;   

      f.coordLast[1].x = f.coordLast[0].x;   

      f.coordLast[1].y = f.coordLast[0].y;   

      f.coordLast[0].x = f.x;   

      f.coordLast[0].y = f.y;   

      if(f.startX >= f.targetX){   

       if(f.x + vx <= f.targetX){   

        ff.x = f.targetX;   

        f.hitX = true;   

       } else {   

        f.x += vx;   

       }   

      } else {   

       if(f.x + vx >= f.targetX){   

        ff.x = f.targetX;   

        f.hitX = true;   

       } else {   

        f.x += vx;   

       }   

      }   

      if(f.startY >= f.targetY){   

       if(f.y + vy <= f.targetY){   

        ff.y = f.targetY;   

        f.hitY = true;   

       } else {   

        f.y += vy;   

       }   

      } else {   

       if(f.y + vy >= f.targetY){   

        ff.y = f.targetY;   

        f.hitY = true;   

       } else {   

        f.y += vy;   

       }   

      }       

      if(f.hitX && f.hitY){   

       self.createParticles(f.targetX, f.targetY, f.hue);   

       self.fireworks.splice(i, 1);   

      }   

     };   

    };   

    // 绘制烟花   

    self.drawFireworks = function(){   

     var i = self.fireworks.length;   

     self.ctx.globalCompositeOperation = 'lighter';   

     while(i--){   

      var f = self.fireworks[i];     

      self.ctx.lineWidth = f.lineWidth;   

      var coordRand = (rand(1,3)-1);        

      self.ctx.beginPath();          

      self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));   

      self.ctx.lineTo(Math.round(f.x), Math.round(f.y));   

      self.ctx.closePath();   

      self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';   

      self.ctx.stroke();    

      if(self.showTarget){   

       self.ctx.save();   

       self.ctx.beginPath();   

       self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)   

       self.ctx.closePath();   

       self.ctx.lineWidth = 1;   

       self.ctx.stroke();   

       self.ctx.restore();   

      }   

      if(self.showShockwave){   

       self.ctx.save();   

       self.ctx.translate(Math.round(f.x), Math.round(f.y));   

       self.ctx.rotate(f.shockwaveAngle);   

       self.ctx.beginPath();   

       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+')';   

       self.ctx.lineWidth = f.lineWidth;   

       self.ctx.stroke();   

       self.ctx.restore();   

      }   

     };   

    };   

    // 绑定事件   

    self.bindEvents = function(){   

     $(window).on('resize', function(){      

      clearTimeout(self.timeout);   

      self.timeout = setTimeout(function() {   

       selfself.canvas.width = self.cw = $(window).innerWidth();   

       selfself.canvas.height = self.ch = $(window).innerHeight();   

       self.ctx.lineCap = 'round';   

       self.ctx.lineJoin = 'round';   

      }, 100);   

     });   

     $(self.canvas).on('mousedown', function(e){   

      self.mx = e.pageX - self.canvas.offsetLeft;   

      self.my = e.pageY - self.canvas.offsetTop;   

      self.currentHue = rand(self.hueMin, self.hueMax);   

      self.createFireworks(self.cw/2, self.ch, self.mx, self.my);    

      $(self.canvas).on('mousemove.fireworks', function(e){   

       self.mx = e.pageX - self.canvas.offsetLeft;   

       self.my = e.pageY - self.canvas.offsetTop;   

       self.currentHue = rand(self.hueMin, self.hueMax);   

       self.createFireworks(self.cw/2, self.ch, self.mx, self.my);            

      });       

     });   

     $(self.canvas).on('mouseup', function(e){   

      $(self.canvas).off('mousemove.fireworks');            

     });   

    };   

    self.clear = function(){   

     self.particles = [];   

     self.fireworks = [];   

     self.ctx.clearRect(0, 0, self.cw, self.ch);   

    };   

    self.canvasLoop = function(){   

     requestAnimFrame(self.canvasLoop, self.canvas);      

     self.ctx.globalCompositeOperation = 'destination-out';   

     self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';   

     self.ctx.fillRect(0,0,self.cw,self.ch);   

     self.updateFireworks();   

     self.updateParticles();   

     self.drawFireworks();      

     self.drawParticles();   

    };   

    self.init();     

   }   

   var fworks = new Fireworks();   

   $('#info-toggle').on('click', function(e){   

    $('#info-inner').stop(false, true).slideToggle(100);   

    e.preventDefault();   

   });    

  });   

 </script>  

 <canvas width="1400" height="449"></canvas>  

  </body>  

</html>  

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

更多信息请查看网页制作
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map