脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript案例之粒子烟花，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

JavaScript案例之粒子烟花，前一段周末学习一下Canvas案例的源码，分析了一下一些案例的实现思路，拓宽一下知识面，并按照案例的实现思路自己实现了下，本系列文章是分享一些觉得有趣的案例以及分析其实现思路。

本次分享案例是粒子烟花，该源码在网上有别人分享，该案例是涉及的主要知识点是Canvas方面的知识以及路径计算相关的数学知识，具体实现效果如下：

在本案例中实现的功能：

鼠标点击以及拖动创建目标圆环，每一次创建颜色都不相同 目标圆环本身存在闪烁效果 创建目标圆环后由发射点发射子弹 子弹击中目标后爆炸，产生烟花效果

动画：就是画面不断的切换，人眼视觉残留的效果，之前好像在哪看过中国的电视是每秒24帧，即每一秒切换24幅画面形成动态的效果。

通过对动画概念的简单熟知，可以知道在浏览器上实现动画也是如此，那么问题就变得清晰了。想要实现动画效果，我们就需要关注每一幅画面的整体不变的部分以及局部改变的部分，正是改变的部分才是动画的内容以及关键点。

就本案例来说，上面的动画部分有：

目标点的闪烁 子弹的轨迹 烟花的爆炸

现在就来详细分析各个动画部分的实现：

目标点的闪烁、
所谓的闪烁，直观上表现的是大小大小的交替，注意这两个字眼：’大小’， ‘交替’，所谓大小即是圆环的半径，交替则表示圆环的半径是有范围的，当达到范围临界值，就要进行相反方向的变化。

子弹的轨迹
子弹存在长度及角度，实际上角度以及子弹每次的终点确定都是使用勾股定理。

可以使用Math中的函数来求出目标点和发射点的斜边与x轴方向的角度，那么子弹移动如何实现，我们已经知道动画是由每一帧每一帧画面组成的，那么子弹移动就要改变每一帧画面中子弹的起始位置和终点位置，如何确定每次子弹移动后的x轴和y轴值呢？
有了角度，需要知道斜边，即每次子弹移动的距离，这个不是你自己定义的吗，由此就可实现子弹的移动。

烟花的爆炸
烟花是由一定数量的粒子组成，每个粒子都是圆形，每个粒子的角度不同，每个粒子消失的时间不同，还要有较为逼真的重力效果。上面试实现粒子爆炸的关键因素。
一定数量的粒子表示烟花是由粒子元素组成，我们改变的就是这一定数量的粒子
烟花爆炸的扩散效果就是通过改变一定数量粒子的x轴来实现。
烟花重力效果就是通过y轴值的改变来实现
烟花消失的效果就是通过烟花粒子的透明度来实现

想要实现整体的效果，需要定时重绘Canvas, 可以使用setInterval或者requestAnimationFrame，注意时间的取值，前者取时1000 / 60。

具体的实现代码以及详细的注释会上传到我的GIThub上，如果感兴趣可以看看。

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript案例之粒子烟花全部内容，希望文章能够帮你解决javascript代码实例教程-JavaScript案例之粒子烟花所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。