Как создать зацикленную анимацию с использованием кривой Безье в canvas.js?

  • 10 сентября 2023 г. 18:37
Ответы на вопрос 1
Вот пример кода, который позволяет создать зацикленную анимацию, используя кривую Безье в canvas.js:

```javascript
// Создание основного холста
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Настройка пунктирной линии
ctx.setLineDash([5, 3]);

// Определение точек контроля для кривой Безье
var controlPoints = [
  {x: 50, y: 200},
  {x: 150, y: 50},
  {x: 250, y: 350},
  {x: 350, y: 200}
];

// Функция для рисования кривой Безье
function drawBezierCurve() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(controlPoints[0].x, controlPoints[0].y);
  ctx.bezierCurveTo(
    controlPoints[1].x, controlPoints[1].y,
    controlPoints[2].x, controlPoints[2].y,
    controlPoints[3].x, controlPoints[3].y
  );
  ctx.stroke();

  // Сдвиг всех точек контроля влево
  var firstPoint = controlPoints.shift();
  controlPoints.push(firstPoint);
}

// Запуск анимации
setInterval(drawBezierCurve, 100);
```

Чтобы создать бесконечно текущую волну, можно генерировать новую волну, когда текущая волна вышла за пределы блока. Вот пример такого кода:

```javascript
// Создание основного холста
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Настройка пунктирной линии
ctx.setLineDash([5, 3]);

// Задание параметров волны
var wave = {
  amplitude: 50,
  wavelength: 200,
  speed: 1,
  offset: 0,
  y: canvas.height / 2
};

// Функция для рисования волны
function drawWave() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();

  // Рисование с использованием пунктирной линии
  ctx.setLineDash([5, 3]);
  ctx.lineDashOffset = -wave.offset;

  for (var x = 0; x < canvas.width; x++) {
    var y = wave.y + Math.sin(x / wave.wavelength + wave.offset) * wave.amplitude;
    ctx.lineTo(x, y);
  }

  ctx.stroke();

  // Обновление смещения волны
  wave.offset += wave.speed;

  // Если волна вышла за пределы блока, генерируем новую волну
  if (wave.offset > Math.PI * 2) {
    wave.offset -= Math.PI * 2;
  }
}

// Запуск анимации
setInterval(drawWave, 10);
```

Надеюсь, это поможет вам создать зацикленную анимацию с использованием кривой Безье и бесконечно текущую волну на canvas.js.
Похожие вопросы