快过年了,用JavaScript让你的网页放烟花吧

马上就要过春节了,大城市里依然是不准燃放烟花这种空气污染的东西的,想念小时候在自家院子里放花的快乐时光,大城市里的小朋友们是体会不到这种快乐了。但作为前端工程师,这难不倒我们,下面就教大家如何用JS在网页里放烟花。

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

这分代码经我修改后,已经植入到“我爱掘金”的蝌蚪池塘中,只要发送“新年快乐”,“春节快乐”,就可以在池塘里放烟花了。

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

如何实现的?

先创建一个Canvas

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

 
 
 
 
  1. var canvas = document.getElementById('myCanvas'); 
  2. var context = canvas.getContext('2d'); 
  3.  
  4. function resizeCanvas() { 
  5.     canvas.width = window.innerWidth; 
  6.     canvas.height = window.innerHeight; 
  7.  
  8. function clearCanvas(){ 
  9.  context.fillStyle = '#ffffff'; 
  10.  context.fillRect(0,0,canvas.width, canvas.height); 
  11.  
  12. window.addEventListener('resize', resizeCanvas, false); 
  13. resizeCanvas(); 

放烟花之前的练习

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

 
 
 
 
  1. function mouseDownHandler(e) { 
  2.     var x = e.clientX; 
  3.     var y = e.clientY; 
  4.  
  5.     drawFireworks(x,y); 
  6.  
  7. function drawFireworks(sx,sy) { 
  8.     var count = 10;//烟花粒子数量 
  9.     var radius = 10;//烟花环绕半径 
  10.  
  11.     for(var i = 0 ;i
  12.         var angle = 360/count*i;//烟花粒子角度 
  13.         var radians = angle * Math.PI / 180;//烟花粒子弧度 
  14.  
  15.         var vx = sx+Math.cos(radians) * radius; 
  16.         var vy = sy+Math.sin(radians) * radius; 
  17.  
  18.         var size = 2; 
  19.         context.beginPath(); 
  20.         context.arc(vx, vy, size, 0, Math.PI*2, false) 
  21.         context.closePath(); 
  22.         context.fillStyle = "#ff0000"; 
  23.         context.fill(); 
  24.     } 
  25.  
  26. document.addEventListener('mousedown', mouseDownHandler, false); 

以上代码的含义大家应该都懂对不对?但现在没有动画,一点也不像烟花。别着急,我们马上就让它们动起来。

动起来

动起来其实就是不断的去绘制一个值从小变大的圆心半径...能明白吧,不断的绘制有两种方法,setInterval和requestAnimationFrame,两种方法都可以。

setInterval

优点:可以比较容易的设定动画的绘制频率。

 
 
 
 
  1. var radius = 0;//圆心半径 
  2. function fire(x,y){ 
  3.     function tick() { 
  4.         drawFireworks(x,y);//绘制烟花 
  5.         radius++;//半径不断变大 
  6.     } 
  7.     setInterval(tick,30);//每30毫秒绘制一次 

requestAnimationFrame

优点:绘制频率跟浏览器画面的绘制同步。

 
 
 
 
  1. var radius = 0; 
  2. function fire(x,y){ 
  3.     function tick() { 
  4.         drawFireworks(x,y); 
  5.         radius++; 
  6.         requestAnimationFrame(tick); 
  7.     } 
  8.     tick(); 

是不是已经有点感觉了?

更像烟花一点

但真实的烟花肯定不会这么听话,规规矩矩的保持弧度和速度,所以我们要加入一些随机因子。

 
 
 
 
  1. var rid; 
  2. function fire(x,y){ 
  3.     createFireworks(x,y); 
  4.  
  5.     function tick() { 
  6.         drawFireworks(); 
  7.         rid=requestAnimationFrame(tick); 
  8.     } 
  9.     cancelAnimationFrame(rid); 
  10.     tick(); 
  11.  
  12. var particles=[]; 
  13. function createFireworks(sx,sy){ 
  14.     particles=[]; 
  15.  
  16.     var hue = Math.floor(Math.random()*51)+150; 
  17.     var hueVariance = 30; 
  18.     var count = 100; 
  19.  
  20.     for(var i = 0 ;i
  21.         var p = {}; 
  22.  
  23.         var angle = Math.floor(Math.random()*360); 
  24.         p.radians = angle * Math.PI / 180; 
  25.         p.radius = 0; 
  26.  
  27.         p.sx = sx; 
  28.         p.sy = sy; 
  29.  
  30.         p.speed = (Math.random()*5)+.4; 
  31.  
  32.         p.size = Math.floor(Math.random()*3)+1; 
  33.  
  34.         p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance); 
  35.         p.brightness = Math.floor(Math.random()*31)+50; 
  36.         p.alpha = (Math.floor(Math.random()*61)+40)/100; 
  37.  
  38.         particles.push(p); 
  39.     } 
  40.  
  41. function drawFireworks() { 
  42.     clearCanvas(); 
  43.  
  44.     for(var i = 0 ;i
  45.         var p = particles[i]; 
  46.  
  47.         p.vx = p.sx+Math.cos(p.radians) * p.radius; 
  48.         p.vy = p.sy+Math.sin(p.radians) * p.radius; 
  49.  
  50.         p.radius += 1+p.speed; 
  51.  
  52.         context.beginPath(); 
  53.         context.arc(p.vx, p.vy, p.size, 0, Math.PI*2, false); 
  54.         context.closePath(); 
  55.  
  56.         context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+100+')'; 
  57.         context.fill(); 
  58.     } 

很绚丽的对不对?现在我们再给它加入一点烟雾拖尾的效果~

 
 
 
 
  1. function tick() { 
  2.  //tips:注意新加入的这4行代码 
  3.  context.globalCompositeOperation = 'destination-out'; 
  4.  context.fillStyle = 'rgba(0,0,0,'+10/100+')'; 
  5.  context.fillRect(0,0,canvas.width,canvas.height); 
  6.  context.globalCompositeOperation = 'lighter'; 
  7.  //tipsend 
  8.  drawFireworks(); 
  9.  rid=requestAnimationFrame(tick); 

为了更写实,我们继续升级。

现在加入一些重力的影响,让烟花粒子的移动速度越来越慢并且慢慢下落消失。

 
 
 
 
  1. var vx = Math.cos(p.radians) * p.radius; 
  2. var vy = Math.sin(p.radians) * p.radius + 0.4; 
  3.  
  4. p.x += vx; 
  5. p.y += vy; 
  6.  
  7. p.radius *= 1 - p.speed/100; 
  8.  
  9. p.alpha -= 0.005; 

现在这个烟花看起来是不是就很有烟花的感觉了,当然各种参数你还可以更细致的加入一些变量。比如绘制一个炮竹,从炮竹处向天空发射。最后才是烟花...这些就交给大家自己去实现吧。

在任意网页上放烟花

在Chrome里新建一个书签,复制以下代码,粘贴到网址一栏,然后保存。

 
 
 
 
  1. 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

当前标题:快过年了,用JavaScript让你的网页放烟花吧
分享地址:http://www.shufengxianlan.com/qtweb/news17/431067.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联