Как реализовать эффект воды на Canvas?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

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

var noise = function(x, y) {
    return Math.random() * Math.sin(x * 0.01) * Math.sin(y * 0.01) * 10;
};

var water = function() {
    for (var x = 0; x < canvas.width; x++) {
        for (var y = 0; y < canvas.height; y++) {
            var nx = x + noise(x, y);
            var ny = y + noise(x, y);
            var seed = Math.floor(Math.abs(noise(nx, ny)));
            ctx.fillStyle = (seed % 2 === 0) ? "#0077be" : "#04a2ff";
            ctx.fillRect(x, y, 1, 1);
        }
    }
};

water();