用js实现一个炫酷的烟花效果

我们要理清整个流程的思路。

首先建立一块画布，用于展示烟花的效果，然后就要去思考烟花燃放的流程，我们都知道烟花通常都是先有一份飞上天，然后再分散成很多个小烟花，并且每一个小烟花都有不同的样式以及运动方式。

所有整体思路就是先建立一个div作为我们的大烟花，当大烟花运动到我们鼠标点击的位置的时候，大烟花就会消失，然后就会产生更多的小烟花，并且这些小烟花的运动轨迹样式各不相同。

目录

1.建立一块画布（div）用于展示烟花的效果

2.获取节点

3.先实现大烟花（需要调用随机数方法，随机颜色方法，以及运动函数）

3.1首先先设置fire的样式

3.2设置一个随机数和随机颜色的方法（原型对象）

3.3封装一个运动函数（原型对象）

4.小烟花的实现

4.1设置samll-fire的样式

4.2设置小烟花的属性

---

1.建立一块画布（div）用于展示烟花的效果

/*给画布设置css样式  */
#container {
        width: 80%;
        height: 600px;
        border: 1px red solid;
        position: relative;
        margin: 20px auto;
        cursor: pointer;
        background: black;
    }

<!-- 设置一个div -->
 <div id="container"></div>

2.获取节点

 //获取节点
 var app = document.getElementById('container');
        //给app设置一个绑定事件
        app.onclick = function(event) {
                var e = event || window.event
               //获得鼠标点击的位置的坐标
                var pos = {
                    cy: e.offsetY,
                    cx: e.offsetX
                }
                new Fire(app, pos)
            }

 烟花的实现过程：先实现一个大的div运动到鼠标点击的位置，然后在散开成为很多个div

3.先实现大烟花（需要调用随机数方法，随机颜色方法，以及运动函数）

       // 构造函数
        function Fire(app, pos) {
            //把属性设置成变量
            this.app = app;
            this.pos = pos;
            //创建一个大的div
            this.bf = document.createElement('div');
            //设置一个类名
            this.bf.className = 'fi