Как нарисовать капли дождя на Canvas?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// задаем параметры для капель дождя
var numDrops = 50;
var drops = [];

for (var i = 0; i < numDrops; i++) {
  drops.push({
    x: Math.random() * canvas.width, // случайное расположение на поле
    y: Math.random() * canvas.height,
    r: Math.random() * 4 + 1, // случайный радиус капли
    d: Math.random() * numDrops // случайное время жизни капли
  });
}

// отрисовываем капли
function drawRain() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#67B7DC";
  ctx.beginPath();

  for (var i = 0; i < numDrops; i++) {
    var drop = drops[i];
    ctx.moveTo(drop.x, drop.y);
    ctx.arc(drop.x, drop.y, drop.r, 0, Math.PI * 2, true);
  }

  ctx.fill();
  moveRain();
}

// двигаем капли вниз по полотну
function moveRain() {
  for (var i = 0; i < numDrops; i++) {
    var drop = drops[i];
    drop.y += Math.floor(Math.random() * 10) + 1;
    if (drop.y > canvas.height) {
      drop.y = -25;
      drop.x = Math.random() * canvas.width;
    }
  }
}

// обновляем полотно с определенной частотой
setInterval(drawRain, 30);