您好！欢迎来到e资源！本站资源24小时自动发货，海量精品课程资源免费下载！
提交工单 软件资源 投稿赚佣金投稿赚佣金 站长工具箱 资源交流吧 PPT资源 升级SVIP会员无限下载升级SVIP

HTML5 Canvas实现烟花绽放特效

2021-01-21 22:08:02
0
本文为大家带来了一款，免费而又安全环保的HTML5Canvas实现的放烟花特效。效果如下：代码如下：XML/HTMLCode复制内容到剪贴板<!DOCTYPE HTML> <html> <head> <title>Can...

本文为大家带来了一款，免费而又安全环保的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强大的效果惊呆了，一饱眼福了吧。


#html5 #实现 #烟花 #绽放 #特效
开通vip
首页 导航 会员 客服 微信
QQ 微信 邮箱 TOP