HTML5 Canvas实现烟花绽放特效

前端  /  管理员 发布于 6年前   354

本文为大家带来了一款，免费而又安全环保的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; &nbs

  • 上一条：
    php对接java现实加签验签的实例
    下一条：
    PERL脚本 学习笔记

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客