canvas水波纹效果_canvas水纹_我爱丁丁猫的博客-程序员秘密

技术标签：水波纹效果 html5特效 canvas特效前端 css3特效水波特效 javascript特效

先看效果

演示效果

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

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

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

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

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

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

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

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

看下图：

基本算法如下：

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

本文链接：https://blog.csdn.net/QDY5945/article/details/102998477

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

微信小程序连接图灵API实现智能聊天（超级简单）_Jarry96的博客-程序员秘密

前言：最近写了一个微信小程序，扫码体验：进入正题：首先去图灵机器人注册一个机器人http://www.tuling123.com/，把apikey复制下来。小程序的demo.wxml<view class='top'>{{tittle}}</view><view class='que' ><block wx:for="...

Linux下文件查看_linux下怎么找到e盘下的文件_游戏猫的博客-程序员秘密

查看文件头部数据 head -n 10 a.log head -10 a.log查看文件尾部数据 tail -n 10 a.log tail -10 a.log显示文件所有内容 cat a.log带行号显示文件所有内容 cat -n a.logmore 显示一屏的内容 more a.log回车：可以向下滚动一行空格键或Ctrl+F：向下滚动一屏 Ctrl+...

C++保留小数精度_c++小数精度_OderAngel的博客-程序员秘密

在C++的编程中，总会遇到浮点数的处理，有的时候，我们只需要保留2位小数作为输出的结果，这时候，问题来了，怎样才能让cout输出指定的小数点后保留位数呢？在C语言的编程中，我们可以这样实现它：printf("%.2f", sample);在C++中，是没有格式符的，我们可以通过使用setprecision()函数来实现这个需求。想要使用setprecision()函数，必须包含头文件#includ...

国产操作系统环境搭建(内含镜像资源)_银河麒麟 debian_码农飞飞的博客-程序员秘密

随着中美科技战的酝酿和发展,国家越来越重视自主可控的操作系统的发展和推广。近些年国产操作系统如雨后春笋一般冒出来很多包括:中标麒麟、银河麒麟、UOS、中科方德等等。依据操作系统的来源将国产操作系统划分为两类:1.UOS和中科方德2.麒麟操作系统(中标麒麟好像已经和银河麒麟合并了)UOS和中科方德的操作系统是基于Debian的，银河麒麟是基于Ubuntu系统的。因此在新建UOS和中科方德系统的虚拟机的时候要注意操作系统类型要选择Debian;建议选择Debian9.x 64位，选择Debi

数据库连接池的作用及c3p0的详解_IT发ET烧了的博客-程序员秘密

转载出处：http://blog.csdn.net/qq441568267/article/details/529517671.JDBC数据库连接池的必要性在使用开发基于数据库的web程序时，传统的模式基本是按以下步骤：　　在主程序（如servlet、beans）中建立数据库连接。进行sql操作断开数据库连接。这种模式开发，存在的问题:普通的JDBC数据库连接使用 DriverManager 来获...

远控免杀专题文章(2)-msfvenom隐藏的参数_msfvenom -p_明月清风~~的博客-程序员秘密

脉搏文库 TideSec本专题文章导航1、远控免杀专题文章(1)-基础篇：https://www.secpulse.com/archives/123295.html因为cobaltstrike生成payload比较简单，这里不再累述，只是介绍一下msfvenom的基本参数和一些小技巧。本节目录如下：msfvenom简介msfvenom是msfpayload和msfencode的结合体，于2015年6月8日取代了msfpayload和msfencode。在此之后，metasploit-fram

随便推点

今天终于彻底搞懂 Nginx 的五大应用场景_libin9iOak的博客-程序员秘密

今天终于彻底搞懂 Nginx 的五大应用场景一、HTTP服务器1、首先在文档根目录Docroot(/usr/local/var/www)下创建html目录, 然后在html中放一个test.html;2、配置nginx.conf中的server3、访问测试4、指令简介5、location uri正则表达式二、静态服务器1、在/usr/local/var/www 下分别创建images和img目录，分别在每个目录下放一张test.jpg三、反向代理四、负载均衡1. RR(round robin :轮询 .