Вот пример кода, который позволяет создать зацикленную анимацию, используя кривую Безье в 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.