网站开发 认证前端网站开发项目经验

一.效果

二.原理

1.水波
要模拟波浪，就要首先画出一条波浪线，正弦余弦曲线就很适合。

y=A*sin(ω*x+φ)+k
y=A*cos(ω*x+φ)+k
这是正弦余弦曲线的公式，要想实现水波效果，那需要两条曲线，一条曲线的波峰对着另外一条曲线的波谷，要实现这样的曲线效果，只有让正弦曲线前移π/2个单位。所以我们最后对两个水波使用的公式就变成了下面两个
y=A*sin(ω*x-π/2+φ)+k
y=A*cos(ω*x+φ)+k
在我们的代码中A就是水波的高度，ω是水波的周期，φ是水波的偏移量，用于实现动画效果，k是水波的高度。
2.温度
这个就比较简单了，用drawPie画饼状图就行。需要注意的是࿰