前端如何呼风唤雨

创世纪第一章

首卷原文

起初我创造了canvas 。

我说,要有雨,就有了雨；

我说,要有雪,就有了雪。

而对于前端来说，canvas即是天地

在canvas这个天地上，前端可以呼风唤雨，无所不能。

---

文章起因

其实就是最近在做一个需求，需要有下雨下雪的动画特效， 故在这里做了一个drop的组件，来展现这种canvas常见的下落物体的效果。那么，=。= ，就让我们先看看效果吧。

[github地址] 之后贴出来哈。。。。

---

效果展示

调用代码

下雨

下雪

看起来效果还是不错的，相对于使用创建dom元素来制作多物体位移动画， 使用canvas会更加容易快捷，以及性能会更好

---

源码讲解

好了，接下来讲解一下简单的实现原理 首先，先定义一些我们会用到的全局变量，如风向角度，几率，对象数据等

---

定义全局变量

接下来我们需要定义几个重要的对象 该组织所需定义的对象也比较少，总共才三个 在整个drop组件中共定义了`三个核心对象，分别是如下：

对于Vector对象的理解也十分简单粗暴，就是记录下落对象drop的速度/V

对于Drop对象其基本定义如下

看了上面的三个方法，是否都猜到他们的作用呢，接下来让我们了解这三个方法做了些什么

---

构造函数

构造函数主要负责定义drop对象的初始信息，如速度，初始坐标，大小，加速度等

---

Drop对象的update方法

update方法负责，每一帧drop实例的属性的改变 如位移的改变

Drop对象的draw方法

draw方法负责，每一帧drop实例的绘画

---

定义的十分简单，这里就不做详细说明

---

对外接口

update

即相当于整个canvas动画的开始函数

init

init接口，初始化整个canvas画布的一切基础属性 如获得屏幕的像素比，和设置画布的像素大小，和样式的设置

---

结束语

好了，一个简单的drop组件已经完成了，当然其存在着许多地方不够完善，经过本次drop组件的编写，对于canvas的动画实现，我相信在H5的场景中拥有着许多可发掘的地方。

最后说下不足的地方和后期的工作哈：

0、该组件目前对外接口不够多，可调节的范围并不是很多，抽象不是很彻底

1、 setStyle 设置 基本样式

2、 Drop 和Bounce 对象的 update 和 draw 方法的自定义，让用户可以设立更多下落的 速度和大小改变的形式和样式效果

3、 应增加对动画的pause,加速和减速等操作的接口