如何使用 HTML5 Canvas 制作水波纹效果

看看flash是怎么做的吧。水波波纹效果有好多种做法，实现难度不一样，效果也不一样。

比如这个

http://bbs.9ria.com/forum.php?mod=viewthread&tid=404246&highlight=%E6%B0%B4%E6%B3%A2

可以在论坛搜一搜，有讲原理的，也有直接贴源码的。用遮罩做比较简单，用柏林噪声做比较难。

首先在代码的如下位置打印事件对象，检查是不是重复调用了：

结果点击上面的“waves”和“btn”按钮分别返回了不同的事件对象，所以排除重复调用的可能。

在代码的129行，将动画定时器的时间改大（减慢动画执行速度），观察效果：

经观察，发现这个“水波纹”特效是全屏的，你看到的点击一个按钮后两个按钮上都有水波纹，其实是因为生成的那个水波纹动画层全屏覆盖住了整个页面，由于水波纹层是白色半透明的，所以页面的白色区域下你看不见，有其他颜色的区域都会看见（你可以把body的背景颜色改为除白色外的其他颜色，再点按钮试试）。

根因已经找到，解决的办法很简单，让生成的水波纹层不超出当前按钮区域即可，具体为：在代码第20行，为.waves, .btn 增加两行CSS代码：

position: relative

overflow: hidden

MD风格即Material Design，机器翻译为质感设计或者材料设计。

大概有以下特征：

1、支持5.0状态栏沉浸。

2、界面颜色不花哨，一般只有两种颜色，一种是底色，另一种是希望突出的颜色。

3、主界面有小圆，一般是某种功能的快捷启用。

4、支持侧滑菜单。

5、水波纹特效。

风格简介：

艺术概念，艺术作品在整体上呈现的有代表性的面貌。风格不同于一般的艺术特色，通过艺术品所表现出来的相对稳定、内在、反映时代、民族或艺术家的思想、审美等的内在特性。本质在于是艺术家对审美独特鲜明的表现，有着无限的丰富性。

艺术家由于不同的生活经历、艺术素养、情感倾向、审美的不同，形成受到时代、社会、民族等历史条件的影响。题材及体裁、艺术门类对作品风格也有制约作用。

---