canvas 水流波纹

<canvas id="canvas" width="1912" height="150"></canvas>

var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    canvas.width = canvas.parentNode.offsetWidth;
    canvas.height = 150;

    window.requestAnimFrame = (function(){
        return window.requestAnimationFrame  ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
    })();

    var boHeight = canvas.height / 2.4;
    var posHeight = canvas.height / 1.2;
    var step = 0;
    var lines = ["rgba(208,215,220, 0.2)", "rgba(208,215,220, 0.2)", "rgba(208,215,220, 0.2)"];

    function loop(){
        ctx.save();

        ctx.clearRect(0,0,canvas.width,canvas.height);
        step++;

        for(var j = lines.length - 1; j >= 0; j--) {
            ctx.fillStyle = lines[j];
            var angle = (step+j*150)*Math.PI/180;
            var deltaHeight = Math.sin(angle) * boHeight;
            var deltaHeightRight = Math.cos(angle) * boHeight;
            ctx.beginPath();
            ctx.moveTo(0, posHeight+deltaHeight);
            ctx.bezierCurveTo(canvas.width/2, posHeight+deltaHeight-boHeight, canvas.width / 2, posHeight+deltaHeightRight-boHeight, canvas.width, posHeight+deltaHeightRight);
            ctx.lineTo(canvas.width, canvas.height);
            ctx.lineTo(0, canvas.height);
            ctx.lineTo(0, posHeight+deltaHeight);
            ctx.closePath();
            ctx.fill();
        }
        
        ctx.restore();
        requestAnimFrame(loop);
    }
    loop();

    $(window).on('resize', function(){
        canvas.width = canvas.parentNode.offsetWidth;
    });