지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > HTML5 Canvas는 불꽃놀이의 특수 효과를 구현합니다._html5 튜토리얼 기술

HTML5 Canvas는 불꽃놀이의 특수 효과를 구현합니다._html5 튜토리얼 기술

WBOY
풀어 주다： 2016-05-16 15:45:41
원래의
2993명이 탐색했습니다.

이 기사에서는 HTML5 Canvas에서 구현된 안전하고 환경 친화적인 무료 불꽃놀이 특수 효과를 소개합니다.

효과는 다음과 같습니다.

코드는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3.   <머리>  
  4.     <제목>캔버스 实现放烟꽃特效제목>  
  5.  <메타 문자 집합="utf- 8">  
  6.     <메타 http-equiv=" X-UA 호환" 콘텐츠="IE=edge">  
  7.     <메타 이름="뷰포트"  콘텐츠="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0 ,user-scalable=no">  
  8.     <스타일 유형="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.   본문{배경색:#000;색상:#999;글꼴:100%/18px helvetica, arial, sans-serif}   
  13.   캔버스{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}   
  14.   #header img{너비:100%; 높이:20%;}   
  15.   #bg img{너비:100%; 높이:80%;}   
  16.   #header,#bg{위치:고정;왼쪽:0;오른쪽:0;z-index:10}   
  17.   #header{top:0}   
  18.   #bg{위치:고정;z-색인:1;하단:0}   
  19.   오디오{위치:고정;디스플레이:없음;하단:0;왼쪽:0;오른쪽:0;너비:100%;z-색인:5}  
  20.  스타일>  
  21.   머리>  
  22.   <몸>  
  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.  <스크립트 src="http: //cdn.bootcss.com/jquery/2.2.0/jquery.min.js">스크립트 >  
  27.  <스크립트>  
  28.   $(함수(){   
  29.    var 불꽃놀이 = 기능(){   
  30.     var self = this;   
  31.     // 产生烟꽃随机数   
  32.     var rand = 함수(rMi, rMa){   
  33.      //按位取反运算符   
  34.      return ~~((Math.random()*(rMa-rMi 1)) rMi);   
  35.     },hitTest = 함수(x1, y1, w1, h1, x2, y2, w2, h2){   
  36.      반품 !(x1   w1 < x2 || x2   w2 <  x1 ||  y1   h1 < y2 ||  y2   h2 < y1);   
  37.     };   
  38.     //请求动画帧   
  39.     window.requestAnimFrame=함수(){   
  40.      return window.requestAnimationFrame   
  41.       ||window.webkitRequestAnimationFrame   
  42.       ||window.mozRequestAnimationFrame   
  43.       ||window.oRequestAnimationFrame   
  44.       ||window.msRequestAnimationFrame   
  45.       ||함수(콜백){   
  46.        window.setTimeout(callback,1000/60);   
  47.       }   
  48.     }();   
  49.     self.init = 함수(){    
  50.      self.canvas = document.createElement('canvas');     
  51.      //캔버스 전체屏   
  52.      selfself.canvas.width = self.cw = $(창 ).innerWidth();   
  53.      selfself.canvas.height = self.ch = $(창 ).내부 높이();     
  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 = 참;   
  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 = '둥근';   
  77.      self.ctx.lineJoin = '둥근';   
  78.      self.lineWidth = 1;   
  79.      self.bindEvents();      
  80.      self.canvasLoop();   
  81.      self.canvas.onselectstart = 기능() {   
  82.       false를 반환합니다.   
  83.      };   
  84.     };     
  85.     // 创建粒子   
  86.     self.createParticles = 함수(x,y, hue){   
  87.      var 카운트다운 = self.partCount;   
  88.      동안(카운트다운--){   
  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.        각도: rand(0, 360),   
  98.        속도: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance,(self .partSpeed   self.partSpeedVariance)),   
  99.        마찰: 1 - self.partFriction/100,   
  100.        중력: self.partGravity/2,   
  101.        hue: rand(hue-self.hueVariance, hue self.hueVariance),   
  102.        밝기: rand(50, 80),   
  103.        알파: rand(40,100)/100,   
  104.        감소: rand(10, 50)/1000,   
  105.        바람: (rand(0, self.partWind) - (self.partWind/2))/25,   
  106.        lineWidth: self.lineWidth   
  107.       };       
  108.       self.particles.push(newParticle);   
  109.      }   
  110.     };   
  111.     // 更新粒子   
  112.     self.updateParticles = 함수(){   
  113.      var i = self.particles.length;   
  114.      동안(i--){   
  115.       var p = self.particles[i];   
  116.       var 라디안 = p.angle * Math.PI / 180;   
  117.       var vx = 수학.cos(라디안) * p.speed;   
  118.       var vy = Math.sin(라디안) * 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 = 함수(){   
  138.      var i = self.particles.length;   
  139.      동안(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 = 함수(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.       속도: self.fworkSpeed,   
  178.       각도: Math.atan2(targetY - startY, targetX - startX),   
  179.       shockwaveAngle: Math.atan2(targetY - startY, targetX - startX) (90*(Math.PI/180)),   
  180.       가속: self.fworkAccel/100,   
  181.       hue: self.currentHue,   
  182.       밝기: rand(50, 80),   
  183.       알파: rand(50,100)/100,   
  184.       lineWidth: self.lineWidth   
  185.      };      
  186.      self.fireworks.push(newFirework);   
  187.     };   
  188.     // 更新烟꽃   
  189.     self.updateFireworks = 기능(){   
  190.      var i = self.fireworks.length;   
  191.      동안(i--){   
  192.       var f = self.fireworks[i];   
  193.       self.ctx.lineWidth = f.lineWidth;   
  194.       vx = 수학.cos(f.angle) * f.speed,   
  195.       vy = 수학.sin(f.angle) * f.speed;   
  196.       f.속도 *= 1   f.가속;       
  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 = 참;   
  207.        } else {   
  208.         f.x  = vx;   
  209.        }   
  210.       } 그렇지 않으면 {   
  211.        if(f.x   vx >= f.targetX){   
  212.         ff.x = f.targetX;   
  213.         f.hitX = 참;   
  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 = 참;   
  222.        } else {   
  223.         f.y  = vy;   
  224.        }   
  225.       } 그렇지 않으면 {   
  226.        if(f.y   vy >= f.targetY){   
  227.         ff.y = f.targetY;   
  228.         f.hitY = 참;   
  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 = 기능(){   
  241.      var i = self.fireworks.length;   
  242.      self.ctx.globalCompositeOperation = '가벼움';   
  243.      동안(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 .밝기 '%, ' 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 = 함수(){   
  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 ).내부 높이();   
  282.        self.ctx.lineCap = '둥근';   
  283.        self.ctx.lineJoin = '둥근';   
  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 = 함수(){   
  303.      self.particles = [];   
  304.      self.fireworks = [];   
  305.      self.ctx.clearRect(0, 0, self.cw, self.ch);   
  306.     };   
  307.     self.canvasLoop = 기능(){   
  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.  스크립트>  
  326.  <캔버스 너비="1400"  높이="449">캔버스>  
  327.   본체>  
  328. html>  

是不是被HTML5는 매우 큰 의미를 갖습니다.

관련 라벨：
canvas html5
원천：php.cn
이전 기사：HTML5 Canvas 입문 학습 tutorial_html5 튜토리얼 기술 다음 기사：다중 관점 3D 회전 가능 HTML5 로고 animation_html5 튜토리얼 기술
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
에서 2024-04-06 15:33:12
0
1
433
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
HTML5에서 enctype과 formenctype의 차이점은 무엇입니까? HTMLLivingStandard(새 HTML5 사양이라고도 함)의 enctype 속성과 formenctype 속성의 차이점이 무엇인지 궁금합니다. 나는 개발자를...
에서 2024-04-02 11:47:56
0
1
275
페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
에서 2024-04-01 20:42:38
0
1
259
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿