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.05;

        var x = i*(this.w/this.count);

        var y = this.h/2 + this.simplex.noise2D(this.speedX,this.speedY)*amp;

        this.ctx[i === 0 ? 'moveTo' : 'lineTo'](x,y);

    }

    this.ctx.lineTo(this.w,-this.h);

    this.ctx.lineTo(0, -this.h);

    this.ctx.closePath();

    this.ctx.fillStyle = color;

    this.ctx.globalCompositeOperation = comp;

    this.ctx.fill();    

}

 

（2）定时器循环绘制：

 

loop(){

    var This = this;

    
    function drawloop(){

        window.requestAnimationFrame(drawloop);

        This.ctx.clearRect(0,0,This.w,This.h);

        This.speedX = 0;

        This.speedY += 0.01; //每次渲染需要更新波峰波谷值


        //连续绘制三次波浪线

        This.draw('red','screen');

        This.draw('green','screen');

        This.draw('blue','screen');

    }


    drawloop();

}

5. 噪波插件单次渲染的数据可视化展示：

6. 全部源码：

    https://github.com/RiversCoder/canvas/blob/master/7_canvas_waves/wave.html