canvas在PC端实现振幅大小可变的动态波浪图

1.应用场景

相同频率下，实现不同颜色和不同振幅的波浪线动态向前滚动，同一波浪线开始到结束振幅对称。

２.前端解决思路

根据应用场景，可以使用2d的canvas实现动态波浪。核心思路为：根据canvas画直线的方法（moveTo、lineTo、stroke等canvas方法），在画布上画连续的点线。实现波浪图的核心点位为：正弦函数和浏览器的定时器（setInterval），利用正弦函数（或者余弦函数）的值来动态增长点的Y轴上的坐标，实现波浪线的生成，再使用定时器定时改变波浪线上每个点线的位置（Y轴的坐标），进而实现动态前进的波浪线

３.前端代码实现步骤:

(1)一条波浪线的实现:
根据canvas画线方法和正弦函数（Math.sin），在多个点线（本例中500个点线）上实现单条波浪线。代码如下：