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

html-css015

如何使用 HTML5 Canvas 制作水波纹效果,第1张

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

比如这个

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

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

1、这就是传说中的莫尔条纹（Moiré+Pattern）啦。一言以蔽之，就是空间频率相近的两组图案相互干涉，会有更低频率（更宽间距）的图案显示出来。其中空间频率是指其中特征条纹间距的倒数。

2、莫尔条纹是18世纪法国研究人员莫尔先生首先发现的一种光学现象。从技术角度上讲，莫尔条纹是两条线或两个物体之间以恒定的角度和频率发生干涉的视觉结果，当人眼无法分辨这两条线或两个物体时，只能看到干涉的花纹，这种光学现象中的花纹就是莫尔条纹。