canvas 模拟真实水波浪动画

1. 核心工具：simplex-noise.min.js

2. 工具介绍：

（1）动态生成可改变可移动的噪波数据

（2）文档地址： https://www.bootcdn.cn/simplex-noise/readme/

 

3. 最终渲染演示：

 

4. Canvas核心过程演示：

 

（1）单次绘制：

 

draw(color,comp){

    var amp = 25; //波浪幅度 可以通过函数传递参数更改不同的幅度

    this.ctx.beginPath();

    for(var i=0;i<=this.count;i++){

        this.speedX += 0