cari

Rumah  >  Artikel  >  hujung hadapan web  >  HTML5 Canvas melaksanakan bunga api yang mekar kesan khas_html5 kemahiran tutorial

HTML5 Canvas melaksanakan bunga api yang mekar kesan khas_html5 kemahiran tutorial

WBOY
WBOYasal
2016-05-16 15:45:412963semak imbas

Artikel ini membawakan anda kesan khas bunga api percuma, selamat dan mesra alam yang dilaksanakan dalam Kanvas HTML5.

Kesannya adalah seperti berikut:

Kod adalah seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >  
  2. <html>  
  3.   <kepala>  
  4.     <tajuk>Kanvas 实现放烟花特>效;>tajuk>    
  5. <meta charset="utf- 8">       
  6. <meta http-equiv=" X-UA-Serasi" kandungan="IE=edge">       
  7. <meta nama="viewport"  kandungan="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0 ,user-scalable=no">       
  8. <gaya taip="teks/ css">     html,badan{ketinggian:100%;margin:0;padding:0}   
  9.   ul,li{text-indent:0;text-decoration:none;margin:0; padding:0}   
  10.   img{border:0}   
  11.   body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}   
  12.   kanvas{kursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}   
  13.   #header img{width:100%; ketinggian:20%;}   
  14.   #bg img{lebar:100%; ketinggian:80%;}   
  15.   #header,#bg{position:fixed;left:0;right:0;z-index:10}   
  16.   #header{atas:0}   
  17.   #bg{position:fixed;z-index:1;bottom:0}   
  18.   audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}  
  19.  gaya>  
  20.   kepala>  
  21.   <badan>  
  22.  <div id="bg" >  
  23.   <img id="bgimg"  src="http://img.ivsky.com/img/tupian/pre/201508/02/yuzhou_xingkong_yu_yueliang-006 .jpg">  
  24.  div>  
  25.  <skrip src="http: //cdn.bootcss.com/jquery/2.2.0/jquery.min.js">skrip >  
  26.  <skrip>  
  27.   $(fungsi(){   
  28.    var Bunga Bunga = fungsi(){   
  29.     var diri = ini;   
  30.     // 产生烟花随机数   
  31.     var rand = fungsi(rMi, rMa){   
  32.      //按位取反运算符   
  33.      pulangan ~~((Math.random()*(rMa-rMi 1)) rMi);   
  34.     },hitTest = fungsi(x1, y1, w1, h1, x2, y2, w2, h2){   
  35.      pulangan !(x1   w1 < x2 || x2   w2 ;<  x1 ||  y1   h1 < y2<🎜 || . y2   h2 < y1);   
    36.     };   
  36.     //请求动画帧   
  37.     window.requestAnimFrame=fungsi(){   
  38.      return window.requestAnimationFrame   
  39.       ||window.webkitRequestAnimationFrame   
  40.       ||window.mozRequestAnimationFrame   
  41.       ||window.oRequestAnimationFrame   
  42.       ||window.msRequestAnimationFrame   
  43.       ||fungsi(panggilan balik){   
  44.        window.setTimeout(panggilan balik,1000/60);   
  45.       }   
  46.     }();   
  47.     self.init = fungsi(){    
  48.      self.canvas = dokumen.createElement('canvas');     
  49.      //kanvas 全屏   
  50.      diridiri.kanvas.lebar = diri.cw = $(tetingkap ).innerWidth();   
  51.      diridiri.kanvas.tinggi = diri.ch = $(tingkap ).innerHeight();     
  52.      zarah.diri = [];    
  53.      self.partCount = 150;   
  54.      bunga api diri = [];    
  55.      diridiri.mx = diri.cw/2;   
  56.      diridiri.saya = diri.ch/2;   
  57.      self.currentHue = 30;   
  58.      self.partSpeed = 5;   
  59.      self.partSpeedVariance = 10;   
  60.      sendiri.partWind = 50;   
  61.      self.partFriction = 5;   
  62.      self.partGravity = 1;   
  63.      self.hueMin = 0;   
  64.      self.hueMax = 360;   
  65.      self.fworkSpeed = 4;   
  66.      self.fworkAccel = 10;   
  67.      self.hueVariance = 30;   
  68.      self.flickerDensity = 25;   
  69.      self.showShockwave = benar;   
  70.      self.showTarget = palsu;   
  71.      self.clearAlpha = 25;   
  72.      $(document.body).append(self.canvas);   
  73.      diridiri.ctx = self.canvas.getContext('2d');   
  74.      self.ctx.lineCap = 'pusingan';   
  75.      self.ctx.lineJoin = 'pusingan';   
  76.      self.lineWidth = 1;   
  77.      self.bindEvents();      
  78.      self.canvasLoop();   
  79.      self.canvas.onselectstart = fungsi() {   
  80.       pulangan palsu;   
  81.      };   
  82.     };     
  83.     // 创建粒子   
  84.     self.createParticles = fungsi(x,y, rona){   
  85.       var kira detik = diri.partCount;   
  86.      semasa(kira detik--){   
  87.       var newParticle = {   
  88.        x: x,   
  89.        y: y,   
  90.        coordLast: [   
  91.         {x: x, y: y},   
  92.         {x: x, y: y},   
  93.         {x: x, y: y}   
  94.        ],   
  95.        sudut: rand(0, 360),   
  96.        kelajuan: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeed - self.partSpeed .partSpeed   self.partSpeedVariance)),   
  97.        geseran: 1 - self.partFriction/100,   
  98.        graviti: self.partGravity/2,   
  99.        warna: rand(hue-self.hueVariance, hue self.hueVariance),   
  100.        kecerahan: rand(50, 80),   
  101.        alfa: rand(40,100)/100,   
  102.        pereputan: rand(10, 50)/1000,   
  103.        angin: (rand(0, self.partWind) - (self.partWind/2))/25,   
  104.        lineWidth: self.lineWidth   
  105.       };       
  106.       self.particles.push(newParticle);   
  107.      }   
  108.     };   
  109.     // 更新粒子   
  110.     self.updateParticles = fungsi(){   
  111.       var i = diri.zarah.panjang;   
  112.      semasa(i--){   
  113.       var p = diri.zarah[i];   
  114.       var radian = p.sudut * Math.PI / 180;   
  115.       var vx = Matematik.cos(radian) * p.speed;   
  116.       var vy = Matematik.sin(radian) * p.speed;   
  117.       p.kelajuan *= p.geseran;   
  118.       p.coordLast[2].x = p.coordLast[1].x;   
  119.       p.coordLast[2].y = p.coordLast[1].y;   
  120.       p.coordLast[1].x = p.coordLast[0].x;   
  121.       p.coordLast[1].y = p.coordLast[0].y;   
  122.       p.coordLast[0].x = p.x;   
  123.       p.coordLast[0].y = p.y;   
  124.       p.x  = vx;   
  125.       p.y  = vy;   
  126.       p.y  = p.graviti;   
  127.       p.sudut  = p.angin;       
  128.       p.alpha -= p.pereputan;   
  129.        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){        
  130.        self.particles.splice(i, 1);    
  131.       }   
  132.      };   
  133.     };   
  134.     // 绘制粒子   
  135.     self.drawParticles = fungsi(){   
  136.       var i = diri.zarah.panjang;   
  137.      semasa(i--){   
  138.       var p = diri.zarah[i];          
  139.       var coordRand = (rand(1,3)-1);   
  140.       self.ctx.beginPath();           
  141.       self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));   
  142.       self.ctx.lineTo(Math.round(p.x), Math.round(p.y));   
  143.       self.ctx.closePath();       
  144.       self.ctx.strokeStyle = 'hsla(' p.hue ', 100%, ' p .kecerahan '%, ' p.alpha ')';   
  145.       self.ctx.stroke();       
  146.       jika(self.flickerDensity > 0){   
  147.        var inverseDensity = 50 - self.flickerDensity;        
  148.        if(rand(0, inverseDensity) === inverseDensity){   
  149.         self.ctx.beginPath();   
  150.         self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth 3)/2, 0, Math.PI*2, false)
  151.         self.ctx.closePath();   
  152.         var randrandAlpha = rand(50,100)/100;   
  153.         self.ctx.fillStyle = 'hsla(' p.hue ', 100%, ' p .kecerahan '%, ' randAlpha ')';   
  154.         self.ctx.fill();   
  155.        }    
  156.       }   
  157.      };   
  158.     };   
  159.     // 创建烟花       
  160.     self.createFireworks = fungsi(startX, startY, targetX, targetY){   
  161.       var Firework baharu = {   
  162.       x: startX,   
  163.       y: startY,   
  164.       startX: startX,   
  165.       startY: startY,   
  166.       hitX: salah,   
  167.       hitY: salah,   
  168.       coordLast: [   
  169.        {x: startX, y: startY},   
  170.        {x: startX, y: startY},   
  171.        {x: startX, y: startY}   
  172.       ],   
  173.       targetX: targetX,   
  174.       targetY: targetY,   
  175.       kelajuan: self.fworkSpeed,   
  176.       sudut: Math.atan2(targetY - startY, targetX - startX),   
  177.       shockwaveAngle: Math.atan2(targetY - startY, targetX - startX) (90*(Math.PI/180)),   
  178.       pecutan: self.fworkAccel/100,   
  179.       warna: self.currentHue,   
  180.       kecerahan: rand(50, 80),   
  181.       alfa: rand(50,100)/100,   
  182.       lineWidth: self.lineWidth   
  183.      };      
  184.      self.fireworks.push(newFirework);   
  185.     };   
  186.     // 更新烟花   
  187.     self.updateFireworks = fungsi(){   
  188.       var i = diri.bunga api.panjang;   
  189.      semasa(i--){   
  190.       var f = diri.bunga api[i];   
  191.       self.ctx.lineWidth = f.lineWidth;   
  192.       vx = Matematik.cos(f.angle) * f.speed,   
  193.       vy = Math.sin(f.angle) * f.speed;   
  194.       f.kelajuan *= 1   f.pecutan;       
  195.        f.coordLast[2].x = f.coordLast[1].x;   
  196.        f.coordLast[2].y = f.coordLast[1].y;   
  197.        f.coordLast[1].x = f.coordLast[0].x;   
  198.        f.coordLast[1].y = f.coordLast[0].y;   
  199.        f.coordLast[0].x = f.x;   
  200.        f.coordLast[0].y = f.y;   
  201.       if(f.startX >= f.targetX){   
  202.        jika(f.x   vx <= f.targetX){   
  203.         ff.x = f.targetX;   
  204.         f.hitX = benar;   
  205.        } lain {   
  206.         f.x  = vx;   
  207.        }   
  208.       } lain {   
  209.        jika(f.x   vx >= f.targetX){   
  210.         ff.x = f.targetX;   
  211.         f.hitX = benar;   
  212.        } lain {   
  213.         f.x  = vx;   
  214.        }  
  215.       }   
  216.       if(f.startY >= f.targetY){   
  217.        if(f.y   vy <= f.targetY){   
  218.         ff.y = f.targetY;   
  219.         f.hitY = benar;   
  220.        } lain {   
  221.         f.y  = vy;   
  222.        }   
  223.       } lain {   
  224.        jika(f.y   vy >= f.targetY){   
  225.         ff.y = f.targetY;   
  226.         f.hitY = benar;   
  227.        } lain {   
  228.         f.y  = vy;   
  229.        }   
  230.       }       
  231.       jika(f.hitX && f.hitY){   
  232.        self.createParticles(f.targetX, f.targetY, f.hue);   
  233.        diri.bunga api.splice(i, 1);   
  234.       }   
  235.      };   
  236.     };   
  237.     // 绘制烟花   
  238.     self.drawFireworks = fungsi(){   
  239.       var i = diri.bunga api.panjang;   
  240.      self.ctx.globalCompositeOperation = 'lighter';   
  241.      semasa(i--){   
  242.       var f = diri.bunga api[i];     
  243.       self.ctx.lineWidth = f.lineWidth;   
  244.       var coordRand = (rand(1,3)-1);        
  245.       self.ctx.beginPath();          
  246.       self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));   
  247.       self.ctx.lineTo(Math.round(f.x), Math.round(f.y));   
  248.       self.ctx.closePath();   
  249.       self.ctx.strokeStyle = 'hsla(' f.hue ', 100%, ' f .kecerahan '%, ' f.alpha ')';   
  250.       self.ctx.stroke();    
  251.       jika(self.showTarget){   
  252.        self.ctx.save();   
  253.        self.ctx.beginPath();   
  254.        self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)   
  255.        self.ctx.closePath();   
  256.        self.ctx.lineWidth = 1;   
  257.        self.ctx.stroke();   
  258.        self.ctx.restore();   
  259.       }  
  260.       jika(self.showShockwave){   
  261.        self.ctx.save();   
  262.        self.ctx.translate(Math.round(f.x), Math.round(f.y));   
  263.        self.ctx.rotate(f.shockwaveAngle);   
  264.        self.ctx.beginPath();   
  265.        self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);   
  266.        self.ctx.strokeStyle = 'hsla(' f.hue ', 100%, ' f .kecerahan '%, ' rand(25, 60)/100 ')';   
  267.        self.ctx.lineWidth = f.lineWidth;   
  268.        self.ctx.stroke();   
  269.        self.ctx.restore();   
  270.       }   
  271.      };   
  272.     };   
  273.     // 绑定事件   
  274.     self.bindEvents = fungsi(){   
  275.      $(window).on('resize', function(){      
  276.       clearTimeout(self.timeout);   
  277.       self.timeout = setTimeout(function() {   
  278.        diriself.canvas.width = diri.cw = $(tetingkap ).innerWidth();   
  279.        diridiri.kanvas.tinggi = diri.ch = $(tetingkap ).innerHeight();   
  280.        self.ctx.lineCap = 'pusingan';   
  281.        self.ctx.lineJoin = 'pusingan';   
  282.       }, 100);   
  283.      });   
  284.      $(self.canvas).on('mousedown', function(e){   
  285.       self.mx = e.pageX - self.canvas.offsetLeft;   
  286.       self.my = e.pageY - self.canvas.offsetTop;   
  287.       self.currentHue = rand(self.hueMin, self.hueMax);   
  288.       self.createFireworks(self.cw/2, self.ch, self.mx, self.my);    
  289.       $(self.canvas).on('mousemove.fireworks', function(e){   
  290.        self.mx = e.pageX - self.canvas.offsetLeft;   
  291.        self.my = e.pageY - self.canvas.offsetTop;   
  292.        self.currentHue = rand(self.hueMin, self.hueMax);   
  293.        self.createFireworks(self.cw/2, self.ch, self.mx, self.my);            
  294.       });       
  295.      });   
  296.      $(self.canvas).on('mouseup', function(e){   
  297.       $(self.canvas).off('mousemove.fireworks');            
  298.      });   
  299.     };   
  300.     self.clear = fungsi(){   
  301.      zarah.diri = [];   
  302.      bunga api diri = [];   
  303.      self.ctx.clearRect(0, 0, self.cw, self.ch);   
  304.     };   
  305.     self.canvasLoop = fungsi(){   
  306.      requestAnimFrame(self.canvasLoop, self.canvas);      
  307.      self.ctx.globalCompositeOperation = 'destination-out';   
  308.      self.ctx.fillStyle = 'rgba(0,0,0,' self.clearAlpha/ 100 ')';   
  309.      self.ctx.fillRect(0,0,self.cw,self.ch);   
  310.      self.updateFireworks();   
  311.      self.updateParticles();   
  312.      self.drawFireworks();      
  313.      self.drawParticles();   
  314.     };   
  315.     self.init();     
  316.    }  
  317.    var fworks = neu Fireworks();   
  318.    $('#info-toggle').on('click', function(e){   
  319.     $('#info-inner').stop(false, true).slideToggle(100);   
  320.     e.preventDefault();   
  321.    });    
  322.   });   
  323.  Skript>  
  324.  <Leinwand Breite="1400"  Höhe="449">Leinwand>  
  325.   Körper>  
  326. html>  

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML5 Canvas pembelajaran pengenalan tutorial_html5 kemahiran tutorialArtikel seterusnya：HTML5 Canvas pembelajaran pengenalan tutorial_html5 kemahiran tutorial

Artikel berkaitan

Lihat lagi