Canvas利用三角函数实现水波动画的实战教程

本文档介绍了如何利用HTML5的`canvas`元素结合三角函数，特别是正弦函数（`sin`）来模拟水波效果的示例代码。在实际项目中，UI设计师希望创建一个动态的水波背景，但原始的CSS尝试未能达到预期效果，因此转向了基于数学图形的方法。 首先，我们回顾了`sin`函数的基本概念。`sin`函数表达式为`y = Asin(wx + φ) + h`，其中参数含义如下： - `A`：振幅，决定了波形的高低起伏。 - `ω`：角频率，与周期`T`的关系为`ω = 2π/T`，控制了波的波动速度。 - `φ`：初相，影响波形的起始位置。 - `h`：在canvas中，由于采用屏幕坐标系，正值`h`实际上表示图像向下平移。 代码实现分为几个步骤： 1. **添加canvas元素**：在HTML中插入`<canvas>`标签，并为其指定一个id，如`<canvas id="canvas"></canvas>`。 2. **设置CSS样式**：确保canvas与页面尺寸一致，以便全屏显示，如`width:100%; height:100%;`。 3. **获取context并初始化变量**：通过JavaScript获取canvas上下文，设置线条颜色、宽度，并声明振幅、角频率、初相和初始位置等参数。 4. **绘制函数图像**：使用`ctx.beginPath()`开始新的路径，`ctx.moveTo(0, height/2)`设置起始点，然后遍历x轴，计算每个点的y值（根据`sin`函数计算），用`ctx.lineTo(x, y)`绘制线条，最后用`ctx.stroke()`完成路径。 5. **动画实现**：为了使图像动起来，将上述绘制函数封装在一个闭包中，定期调用`draw()`方法，通过改变参数如`W`（角频率）来模拟波浪的动态变化。这可以配合`requestAnimationFrame`或其他动画库来实现连续的帧更新。 通过这个示例，开发者可以了解如何运用三角函数和`canvas`技术来创建逼真的水波动画效果，这对于需要动态背景设计的UI项目来说，是一种简洁且灵活的解决方案。同时，这也展示了在实际开发中如何将理论知识转化为实践应用的能力。