如何用JavaScript canvas制作出长尾词效果的雨滴动画？

本文共计903个文字，预计阅读时间需要4分钟。

原文：本文字例为大家分享了canvas实现雨滴特效的具体代码，供大家参考。具体内容如下：

一、雨滴特效需求雨滴从窗口顶部随机落下，到达底部时将呈现波纹渐散开的效果，雨滴特效随机关闭。

简化版：canvas实现雨滴特效，代码参考，雨滴随机下落，形成波纹渐散效果。

本文实例为大家分享了canvas实现雨滴特效的具体代码，供大家参考，具体内容如下

一、雨滴特效需求

雨滴从窗口顶部随机下落到达底部将呈现波纹逐渐散开变淡直到消失，雨滴特效随窗口变化自适应

二、雨滴实现思路

1. 用面向对象的思维 首先创建canvas画布 ，绘制一个雨滴的初始化形状
2. 在给雨滴添加运动的方法
3. 通过定时器让雨滴运动起来

三、具体分析

1.雨滴初始化需要的属性有哪些？
坐标x，y 宽高w，h 。