masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > teks badan

HTML5 Canvas melaksanakan bunga api yang mekar kesan khas_html5 kemahiran tutorial

WBOY
Lepaskan： 2016-05-16 15:45:41
asal
2967 orang telah melayarinya

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强大的效果惊呆了，一饱眼福了吧.

Label berkaitan：
canvas html5
sumber：php.cn
Artikel sebelumnya：HTML5 Canvas pembelajaran pengenalan tutorial_html5 kemahiran tutorial Artikel seterusnya：Kemahiran tutorial HTML5 Logo animation_html5 boleh putar 3D berbilang perspektif
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan