canvas水波纹效果

先看效果

演示效果

 

自然界中水波纹效果十分麻烦，我这里只是根据水波纹的几个特性，在理想环境下模拟水波纹的扩散效果。

这里应用到的属性有：扩散、波动、折射。

扩散：很好理解，水波纹会从触发原点开始向周围扩散

波动：水波纹就一直波，在切面上观看，就是一个正弦函数的波形图

折射：光在不同介质中传播速度不同导致出现折射效果。

 

如果在平静条件下，在垂直方向上看水底事物，很正常。

在波动条件下，因为水的上下波动，导致垂直方向上看到的水底物体，因为波的角度不同，导致水下事物反射的光到人眼的时候，出现一些偏移。

找出这个偏移的算法就是这个效果的精髓所在。

 

 

看下图：

基本算法如下：

1、  根据公式，正弦函数的波形上的某个点的切线角度。
sople=cos(len)【sople为斜率，len正弦位置距离原点的位置】

2、  len要根据水波纹的波长除以2π算出一个周期下r的值
len=r*PI*2/waveLen【waveLen：水波一个周期的长度】
sople=cos(r*PI*2/waveLen)

3、  知道斜率，求出切线的倾斜角
sopleDeg=atan(sople)
sopleDeg = (sopleDeg 360)60

4、  切线的倾斜角区间为0-360度，入射角区间0-90度
inDeg= sopleDeg