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

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

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

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

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

如何实现的?

先创建一个Canvas

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

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

放烟花之前的练习

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

 

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

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

动起来

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

    1.  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毫秒绘制一次  

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

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

  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. p.x += vx;  
  4. p.y += vy;  
  5. p.radius *= 1 - p.speed/100;  
  6. 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<count;i++){var p = {};var angle = Math.floor(Math.random()*360);p.radians = angle * Math.PI / 180;p.x = sx;p.y = sy;p.speed = (Math.random()*5)+.4;pp.radius = p.speed;p.size = Math.floor(Math.random()*3)+1;p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance);p.brightness = Math.floor(Math.random()*31)+50;p.alpha = (Math.floor(Math.random()*61)+40)/100;particles.push(p);}}function drawFireworks() {clearCanvas();for(var i = 0 ;i<particles.length;i++){var p = particles[i];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;context.beginPath();context.arc(p.x, p.y, p.size, 0, Math.PI*2, false);context.closePath();context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';context.fill();}}document.addEventListener('mousedown', mouseDownHandler, false);})(); 

 

 

责任编辑:庞桂玉 来源: 前端大全
相关推荐

2021-01-15 15:51:33

JavaScript开发技术

2021-06-29 23:50:39

插件Vscode代码

2014-12-12 11:12:31

程序员

2021-07-22 10:25:07

JS验证码前端

2011-03-31 09:26:15

MySQL扩展性精简

2017-01-19 15:20:32

远程智能蒲公英

2018-05-28 07:27:18

2012-10-24 09:42:27

数据安全BYOD云数据

2016-11-22 16:34:11

githubgit前端

2011-06-03 14:10:31

SEO网页摘要

2021-08-02 07:52:26

Windows 11操作系统 Linux

2021-08-02 15:30:43

Windows 11Linux

2022-01-26 18:46:46

Canvas烟花粒子特效

2019-09-17 14:31:52

JSJavaScript前端

2021-09-23 05:57:52

Vscode JS 项目

2020-05-07 10:18:06

JavaScript前端技术

2015-03-17 09:34:57

PHP响应式网页设计网页设计建议

2016-11-29 07:39:18

苹果iOS科技新闻早报

2021-05-06 10:46:40

JS代码文字烟花

2015-02-13 10:42:31

前端工具Dreamweaver
点赞
收藏

51CTO技术栈公众号