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

@norval_cronin 

Для создания эффекта волн на Canvas можно использовать следующий алгоритм:

1. Создать Canvas и установить размеры.
2. Создать массив точек, которые будут представлять собой вершины волн.
3. Создать функцию, которая будет рисовать каждый кадр анимации.
4. В этой функции нужно очистить Canvas, затем изменить координаты всех точек в соответствии с формулой синуса (y = Амплитуда * sin(Частота * x + Фаза)).
5. Отрисовать линии, соединяющие все точки.
6. Установить таймер для вызова функции рисования каждый кадр.
7. Изменять параметры волн по желанию, например, увеличивать амплитуду или изменять частоту для создания разных эффектов.

Пример кода на JavaScript, реализующий этот алгоритм:

 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

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
const points = [];

for (let i = 0; i < width; i += 20) {
  points.push({
    x: i,
    y: height / 2,
    offset: Math.random() * Math.PI * 2
  });
}

function draw() {
  ctx.clearRect(0, 0, width, height);
  for (let i = 0; i < points.length; i++) {
    const point = points[i];
    const sine = Math.sin(point.offset + i / 20);
    const y = point.y + sine * 50;
    ctx.beginPath();
    ctx.arc(point.x, y, 3, 0, Math.PI * 2);
    ctx.fill();
    if (i === 0) {
      ctx.moveTo(point.x, y);
    } else {
      ctx.lineTo(point.x, y);
    }
  }
  ctx.stroke();
  requestAnimationFrame(draw);
}

draw();

В этом примере используется массив points, который содержит объекты с координатами x и y точек и случайной начальной фазой offset. Затем в функции draw() изменяются координаты y точек с помощью формулы синуса, и точки соединяются линиями при помощи методов moveTo() и lineTo(). Таймер для вызова функции draw() каждый кадр устанавливается с помощью requestAnimationFrame().