如何用JS让网页放烟花

这篇文章主要讲解了“如何用JS让网页放烟花”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用JS让网页放烟花”吧！

创新互联致力于互联网网站建设与网站营销，提供做网站、成都网站制作、网站开发、seo优化、网站排名、互联网营销、微信小程序开发、公众号商城、等建站开发，创新互联网站建设策划专家，为不同类型的客户提供良好的互联网应用定制解决方案，帮助客户在新的全球化互联网环境中保持优势。

在 codepen 里搜索 “fireworks” 可以搜到各种使用JS完成的烟花效果。我今天分享的代码，也是参考自其中一个。

如何用JS让网页放烟花

这篇文章看完，保证你在任何平台，用任何语言都可以写出来放烟花的效果

如何实现的？

先创建一个Canvas

先新建一个和网页可视区大小一样的canvas，并且通过监听显示区的resize事件，来改变canvas的大小。

var canvas = document.getElementById('myCanvas');  var context = canvas.getContext('2d');  function resizeCanvas() {      canvas.width = window.innerWidth;      canvas.height = window.innerHeight;  }  function clearCanvas(){   context.fillStyle = '#ffffff';   context.fillRect(0,0,canvas.width, canvas.height);  }  window.addEventListener('resize', resizeCanvas, false);  resizeCanvas();

放烟花之前的练习

烟花都是从一个点爆炸，伴随着不同的弧度散开，所以我们先绘制几个小圆点，环绕着一个圆心。有点像loading的小圈圈。这其实就是烟花最开始的状态...

如何用JS让网页放烟花

function mouseDownHandler(e) {      var x = e.clientX;      var y = e.clientY;      drawFireworks(x,y);  } function drawFireworks(sx,sy) {      var count = 10;//烟花粒子数量      var radius = 10;//烟花环绕半径      for(var i = 0 ;i以上代码的含义大家应该都懂对不对？但现在没有动画，一点也不像烟花。别着急，我们马上就让它们动起来。
动起来
动起来其实就是不断的去绘制一个值从小变大的圆心半径...能明白吧，不断的绘制有两种方法，setInterval和requestAnimationFrame，两种方法都可以。
    1.  setInterval
优点：可以比较容易的设定动画的绘制频率。
var radius = 0;//圆心半径  function fire(x,y){      function tick() {          drawFireworks(x,y);//绘制烟花          radius++;//半径不断变大      }      setInterval(tick,30);//每30毫秒绘制一次  }
  2.  requestAnimationFrame
优点：绘制频率跟浏览器画面的绘制同步。
var radius = 0;  function fire(x,y){      function tick() {          drawFireworks(x,y);          radius++;          requestAnimationFrame(tick);      }      tick(); }
是不是已经有点感觉了？
更像烟花一点
但真实的烟花肯定不会这么听话，规规矩矩的保持弧度和速度，所以我们要加入一些随机因子。
var rid;  function fire(x,y){      createFireworks(x,y);      function tick() {          drawFireworks();          rid=requestAnimationFrame(tick);      }      cancelAnimationFrame(rid);     tick();  }  var particles=[];  function createFireworks(sx,sy){      particles=[];      var hue = Math.floor(Math.random()*51)+150;      var hueVariance = 30;      var count = 100;      for(var i = 0 ;i
很绚丽的对不对？现在我们再给它加入一点烟雾拖尾的效果~
function tick() {   //tips:注意新加入的这4行代码   context.globalCompositeOperation = 'destination-out';   context.fillStyle = 'rgba(0,0,0,'+10/100+')';   context.fillRect(0,0,canvas.width,canvas.height);   context.globalCompositeOperation = 'lighter';   //tipsend   drawFireworks();   rid=requestAnimationFrame(tick);  }
为了更写实，我们继续升级
现在加入一些重力的影响，让烟花粒子的移动速度越来越慢并且慢慢下落消失
var vx = Math.cos(p.radians) * p.radius;  var vy = Math.sin(p.radians) * p.radius + 0.4;  p.x += vx;  p.y += vy;  p.radius *= 1 - p.speed/100;  p.alpha -= 0.005;
现在这个烟花看起来是不是就很有烟花的感觉了，当然各种参数你还可以更细致的加入一些变量。比如绘制一个炮竹，从炮竹处向天空发射。最后才是烟花...这些就交给大家自己去实现吧。
在任意网页上放烟花
在Chrome里新建一个书签，复制以下代码，粘贴到网址一栏，然后保存。
javascript:!(function() {var cdom = document.createElement("canvas");cdom.id = "myCanvas";cdom.style.position="fixed";cdom.style.left = "0";cdom.style.top = "0";cdom.style.zIndex=-1;document.body.appendChild(cdom);var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}window.addEventListener('resize', resizeCanvas, false);resizeCanvas();clearCanvas();function clearCanvas(){context.fillStyle = '#000000';context.fillRect(0,0,canvas.width, canvas.height);}function mouseDownHandler(e) {var x = e.clientX;var y = e.clientY;fire(x,y);}var rid;function fire(x,y){createFireworks(x,y);function tick() {context.globalCompositeOperation = 'destination-out';    context.fillStyle = 'rgba(0,0,0,'+10/100+')';    context.fillRect(0,0,canvas.width,canvas.height);    context.globalCompositeOperation = 'lighter';drawFireworks();rid=requestAnimationFrame(tick);}cancelAnimationFrame(rid);tick();}var particles=[];function createFireworks(sx,sy){particles=[];var hue = Math.floor(Math.random()*51)+150;var hueVariance = 30;var count = 100;for(var i = 0 ;i
感谢各位的阅读，以上就是“如何用JS让网页放烟花”的内容了，经过本文的学习后，相信大家对如何用JS让网页放烟花这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！            
            
                            

                新闻名称：如何用JS让网页放烟花                

                地址分享：http://ybzwz.com/article/jsoese.html

如何用JS让网页放烟花

其他资讯