<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>Crash</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>

<canvas id="crash" width="600" height="400"></canvas>

<script src="main.js"></script>

</body>
  
</html>
body {
    display: flex;
    justify-content: center;
}

canvas {
    border: 1px solid #000;
}
const canvas = document.getElementById("crash");
const ctx = canvas.getContext("2d");

let start = {x: 0, y: canvas.height};
let cp1 = {x: 0.7 * canvas.width, y: canvas.height};
let cp2 = {x: 0.84 * canvas.width, y: canvas.height};
let end = {x: canvas.width, y: 0};

let begin = 0;
let offset = 0;

const duration = 15000;

// Функция для плавной анимции
const easeInExpo = (t) => {
    return t === 0 ? 0 : Math.pow(2, 10 * t - 10);
}

const render = (now) => {

    // Длительность анимации
    console.log(Math.round(now / 1000))

    // Вычисления для анимации
    begin = begin || now;
    const t = Math.min(1, (now - begin) / duration);

    // Очищаем
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    // Стили линии
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'green';

    // Отрисовка линии
    ctx.beginPath();
    ctx.moveTo(start.x, start.y);
    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
    ctx.stroke();

    // Увеличение смещения
    offset = easeInExpo(t);

    // Присвоение переменной для анимации
    const crash = requestAnimationFrame(render)

    // Конец анимации
    if (t === 1) {
        cancelAnimationFrame(crash);
        begin = 0;
        console.log("Анимация завершилась на предмете");
    }

}

render()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.