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

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

比如这个

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

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

thumbnail在美工用来具体表现布局方式表达：大致相当亦为效果图及缩略图，很小(大约为3×4英寸)，缩略了细节比较粗糙，是最基本的东西。直线或水波纹表示正文的位置，方框表示图形的位置。然后，中选的小样再进一步发展。

以下举个案例：

a元素超链接thumbnail呈缩略图构成 <div class="col-xs-6 col-md-3"></div>：

<div class="container">

<div class="row">

<div class="col-xs-6 col-md-3">

<a href="http://www.h5edu.cn/" class="thumbnail">

<img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180pxwidth: 100%display: block">

</a>

</div>

<div class="col-xs-6 col-md-3">

<a href="#" class="thumbnail">

<img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180pxwidth: 100%display: block">

</a>

</div>

<div class="col-xs-6 col-md-3">

<a href="#" class="thumbnail">

<img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180pxwidth: 100%display: block">

</a>

</div>

<div class="col-xs-6 col-md-3">

<a href="#" class="thumbnail">

<img src="../image/HAIAN.jpg" alt="180x100%" style="height: 180pxwidth: 100%display: block">

</a>

</div>

</div>

</div>

---