之前在抖音上看到了一个很漂亮的焰火效果。这会儿有时间就用canvas实现了一下。

演示地址：http://suohb.com/work/firework4.htm

先看效果：（静态图片看不太出效果，请直接查看演示地址，考验电脑CPU的时候到了）

实现原理：

焰火特效运用到的物理知识就是抛物线运动。

看起来很复杂的焰火实际上就是一条条的抛物线。

从一个中心点向四周方向抛出一个质点。将质点的轨迹画出来，就是焰火效果了。

//每一个质点对象
 1         var obj = {

             x: x,//当前X坐标

             y: y,//当前Y坐标

             sx: Math.cos(deg)*curSpeed,//X轴方向速度

             sy: Math.sin(deg)*curSpeed,//Y轴方向速度

             len: len + level*10*Math.random(),//焰火显示长度（这么多质点连接起来）

             limit: limit + level*10*Math.random(),//质点移动最大步数

             color: color,//焰火颜色

             level: level,//焰火等级（因为特效是二级焰火，可以做多级）

             list:[{x:x,y:y}]//质点轨迹（将这些轨迹连起来就是焰火的其中一条线）

         };
//向360度方向生成一批质点，形成一个焰火元素
 1 function addFire(x,y,color,level){

     curLevel = level ;

     var lineLen = 10+level*20 + Math.random()*10,

         deg ,

         speed = 1 + Math.random()*level*.4 ,

         len = 15 + Math.random()*level*6,

         limit = len + 4 + Math.random()*level;

     for(var i = 0 ; i < lineLen ; i ++){

         deg = i*(Math.PI*2/lineLen)+Math.random() ;

         var curSpeed = speed + Math.random();

         var obj = 质点对象

         list.push(obj);

     }

 }
//更新质点位置，并将新位置插入质点轨迹之中
 1 function reviewFire(){

     for(var i = 0 ; i <list.length ; i++){

         let obj = list[i];

         obj.x += obj.sx ;

         obj.y += obj.sy ;

         obj.sy += G ;//抛物运动中的重力加速度

         obj.list.push({x:obj.x,y:obj.y});

         obj.list = obj.list.slice(-obj.len);

     }

 }
//画出轨迹即可
 1 function drawFire(){

     cxt.clearRect(0,0,pageWidth,pageHeight);

     var obj ;

     for(var i = 0 ; i < list.length ; i ++){

         obj = list[i] ;

         cxt.beginPath();

         for(var j = 0 ; j < obj.list.length ; j++){

             if(i == 0)

                 cxt.moveTo(obj.list[j].x ,obj.list[j].y);

             else{

                 cxt.lineTo(obj.list[j].x ,obj.list[j].y);

             }

         }

         cxt.strokeStyle = obj.color ;

         cxt.lineWidth = obj.level ;

         cxt.stroke();

     }

 }

完整代码：

 <!doctype html>

 <html>

 <head>

 <meta http-equiv="Pragma" content="no-cache" />

 <meta http-equiv="Cache-Control" content="no-cache" />

 <meta http-equiv="Expires" content="0" />

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

 <title>焰火特效-长按二维码关注公众号，了解更多特效</title>

 <style type="text/css">

 html{

     height: 100%;

 }

 html,body,ul,li,canvas{

     margin: 0;

     padding: 0;

 }

 </style>

 </head>

 <body bgcolor="#000000">

 <canvas id="knife"></canvas>

 <img src="../images/qr.jpg" style="position:fixed;bottom:0;width:100px;height:100px;right:0;">

 </body>

 <script>

 var canvas = document.getElementById("knife");

 canvas.style.position = "absolute" ;

 canvas.style.top = 0 ;

 var pageWidth = window.innerWidth ;

 var pageHeight = window.innerHeight ;

 canvas.width = window.innerWidth ;

 canvas.height = window.innerHeight ;

 var cxt = canvas.getContext("2d");

 var list = [] ;

 var G = 0.036 ;

 var colors = ["#8b008b","#ff69b4","#7fff00","#1e90ff","#00bfff","#0FF","#7cfc00","#ffd700","#ffdead","#f00"];

 var curLevel = 0 ;

 var curColor = 0 ;

 function addFire(x,y,color,level){

     curLevel = level ;

     var lineLen = 10+level*20 + Math.random()*10,

         deg ,

         speed = 1 + Math.random()*level*.4 ,

         len = 15 + Math.random()*level*6,

         limit = len + 4 + Math.random()*level;

     for(var i = 0 ; i < lineLen ; i ++){

         deg = i*(Math.PI*2/lineLen)+Math.random() ;

         var curSpeed = speed + Math.random();

         var obj = {

             x: x,

             y: y,

             sx: Math.cos(deg)*curSpeed,

             sy: Math.sin(deg)*curSpeed,

             len: len + level*10*Math.random(),

             limit: limit + level*10*Math.random(),

             color: color,

             level: level,

             list:[{x:x,y:y}]

         };

         list.push(obj);

     }

 }

 function reviewFire(){

     for(var i = 0 ; i <list.length ; i++){

         let obj = list[i];

         obj.x += obj.sx ;

         obj.y += obj.sy ;

         obj.sy += G ;

         obj.list.push({x:obj.x,y:obj.y});

         obj.list = obj.list.slice(-obj.len);

     }

 }

 function drawFire(){

     cxt.clearRect(0,0,pageWidth,pageHeight);

     var obj ;

     for(var i = 0 ; i < list.length ; i ++){

         obj = list[i] ;

         cxt.beginPath();

         for(var j = 0 ; j < obj.list.length ; j++){

             if(i == 0)

                 cxt.moveTo(obj.list[j].x ,obj.list[j].y);

             else{

                 cxt.lineTo(obj.list[j].x ,obj.list[j].y);

             }

         }

         cxt.strokeStyle = obj.color ;

         cxt.lineWidth = obj.level ;

         cxt.stroke();

     }

 }

 function step(){

     if(curLevel == 1 && list.length == 0){

         addFire(pageWidth/2,100,colors[curColor ++ % colors.length],2);

     }

     reviewFire();

     drawFire();

     requestAnimationFrame(step)

 }

 requestAnimationFrame(step)

 addFire(pageWidth/2,100,colors[curColor ++ % colors.length],2);

 </script>

 </html>

了解更多特效，请关注我的微信公众号：

canvas焰火特效的更多相关文章

  1. 纯JavaScript实现HTML5 Canvas六种特效滤镜

    纯JavaScript实现HTML5 Canvas六种特效滤镜  小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件gloomyfi ...

  2. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  3. 分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...

  4. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  5. 几十行js实现很炫的canvas交互特效

    几十行js实现很炫的canvas交互特效 废话不多说,先上效果图! 本篇文章的示例代码都是抄的一个叫Franks的老外在yutube上的一个教学视频,他还出了很多关于canvas的视频,十分值得学习, ...

  6. html5 canvas 粒子特效

    不知不觉就已经好久没写过博客了,自从七月正式毕业后,离开了实习了将近九个月的老东家,进了鼠厂后,做的事都是比较传统的前端活,之前在tpy的时候只管做移动h5的特效以及小游戏,再加上实习所以时间比较充裕 ...

  7. canvas百分百特效

    这个特效是别的人,非原创.原创地址 http://blog.csdn.net/lecepin/article/details/53536445 背后的水是可以动的 代码我再研究了下,下面是加了注释的代 ...

  8. canvas雪花特效-jQuery插件实现

    这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...

  9. canvas入门级基本用法实现雨滴下落特效

    canvas基础知识点参考各种文档,直接上代码,有非常详细注释 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

随机推荐

  1. JDK8的新特性——Lambda表达式

    JDK8已经发布快4年的时间了,现在来谈它的新特性显得略微的有点“不合时宜”.尽管JDK8已不再“新”,但它的重要特性之一——Lambda表达式依然是不被大部分开发者所熟练运用,甚至不被开发者所熟知. ...

  2. zabbix_server 挂了原因及解决方法（内存溢出）

    14721:20170714:095330.028 [file:dbconfig.c,line:452] zbx_mem_malloc(): out of memory (requested 80 b ...

  3. 【基础】26个命令玩转linux，菜鸟及面试必备

    1 查看目录与文件:ls #显示当前目录下所有文件的详细信息 ls -la 2 切换目录:cd #切换当前目录为/opt/test cd /opt/test 3 显示当前目录:pwd pwd 4 创建 ...

  4. 树莓派系列教程：1.环境与系统，无显示器无键盘无网线联网并使用PuTTy与VNC图形界面远程登录

    本文所需物品清单: Raspberry Pi 3 Model B 主板.SD卡与读卡器(用于烧录系统) 资料整理来源在文尾 需要下载的资源与工具: 推荐系统-Raspbian 树莓派官方深度定制的硬件 ...

  5. 将Tomcat配置到你的mac电脑上，命令行启动tomcat

    1.下载tomcat7文件 2.编辑打开.bash_profile vim .bash_profile 3.在该文件最后面添加(CATALINA_HOME为tomcat解压目录) CATALINA_H ...

  6. ElasticSearch 5.0.0 集群安装部署文档

    1.  搭建环境 3台物理机 操作系统 centos7 es1   192.168.31.141   4g内存   2核 es2   192.168.31.142   4g内存   2核 es3    ...

  7. 3.数码相框-通过freetype库实现矢量显示

    本章主要内容如下: 1)矢量字体原理 2)使用freetype库实现矢量字体显示 1. 矢量字体原理 将汉字的笔划边缘用直线段描述成封闭的曲线,并将线段各端点的坐标经压缩存储,如下图所示: 由于每个汉 ...

  8. 剑指offer 丑数

    思路:可以发现,每个丑数都是由以前的丑数得到.当前丑数一定是之前丑数能够得到的最小丑数. AC代码 class Solution { public: int GetUglyNumber_Solutio ...

  9. Docker mongodb 3.4 分片 一主 一副 一仲 鉴权集群部署.

    非docker部署 为了避免过分冗余,并且在主节点挂了,还能顺利自动提升,所以加入仲裁节点 为什么要用docker部署,因为之前直接在虚拟机启动10个mongod 进程.多线程并发测试的时候,mong ...

  10. JVM笔记2-Java虚拟机内存管理简介

    java虚拟机内存管理图如下图所示: 1.线程共享区,是所有的线程所共用的,线程共享区有一下几个组成: 1.方法区: 1.运行时常量池,已经被虚拟机加载的类信息(1.类的版本信息,2.字段,3.方法, ...