HTML5Canvas海水上涨动画效果

海水慢慢升起的 Canvas 动画，视觉效果治愈，适合用在首页背景或者加载动画上。

核心思路是用 HTML5 的加上requestAnimationFrame()，模拟出波浪一点点涨上来的动效。代码结构清晰，逻辑也不复杂，蛮适合拿来练手。

波浪的实现主要靠Math.sin()函数来画出上下起伏的曲线，用不同的蓝色+透明度叠加，看起来还挺有深度感的。再配合fill()每一帧填充，海水就像真的在动一样。

要注意性能问题，别用setInterval()那种老方法，推荐用requestAnimationFrame()，画面更流畅，CPU 也轻松些。

如果你想加点互动，比如点一下加快海水速度，也可以通过addEventListener()加个点击事件，操作空间挺大。

感兴趣的话可以顺带看看下面这些动画效果的实现，也都挺有意思：

• HTML5 Canvas 动画时钟
• Html5javascript 动画基础 canvas
• javascript 加 HTML5 的 Canvas 实现 Lab 单车动画效果
• html5 canvas 球形网状烟花动画特效
• HTML5 加 JavaScript 动画基础源码

如果你做的是互动网页、展示页或者游戏登录界面，这种“海水升起”的动画还挺加分的。