用HTML5制作烟火效果的教程_html5教程技巧
来源：懂视网
责编：小采
时间：2020-11-27 15:19:30
用HTML5制作烟火效果的教程_html5教程技巧
用HTML5制作烟火效果的教程_html5教程技巧:要过年了，过年想到的就是放烟火啦。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再
导读用HTML5制作烟火效果的教程_html5教程技巧:要过年了，过年想到的就是放烟火啦。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再
要过年了，过年想到的就是放烟火啦。。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再说吧。
直接上DEMO吧：放烟火
原理很简单。。就写一个烟火类以及碎屑类，实例化后让它飞起来，然后到达某个点后，把这个烟火对象的dead属性置为true，然后再实例化出一定数量的碎屑对象，并且给与碎屑对象随机一个要到达的目标点，然后让所有碎屑对象飞过去就行了。
【烟火】
用HTML5制作烟火效果的教程_html5教程技巧
用HTML5制作烟火效果的教程_html5教程技巧:要过年了，过年想到的就是放烟火啦。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再
