当前位置：Gxlcms > html代码 > 用HTML5制作烟火效果的教程_html5教程技巧

用HTML5制作烟火效果的教程_html5教程技巧

时间：2021-07-01 10:21:17 帮助过：21人阅读

要过年了，过年想到的就是放烟火啦。。。。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再说吧。

　　直接上DEMO吧：放烟火

　　原理很简单。。。就写一个烟火类以及碎屑类，实例化后让它飞起来，然后到达某个点后，把这个烟火对象的dead属性置为true，然后再实例化出一定数量的碎屑对象，并且给与碎屑对象随机一个要到达的目标点，然后让所有碎屑对象飞过去就行了。

　　【烟火】