График canvas по координтам

Question

Суть: на веб-странице есть два поля для ввода данных, кнопка "почати анімацію", кнопка "завершити анімацію" и canvas. При нажатии на кнопку "почати..." с полей считіваются численные данные, передаются в некую функцию, напр. animation(...). И эта функция будет рисовать график на канве (линию для простоты), и с частотой 30 раз в секунду будет двигать по ней точку. В определенный момент эта точка должна достигнуть конца кривой, и анимация сама остановится, о чем будет сообщено ниже. Также анимацию можно остановить кнопкой "завершити...".

Но у меня почему то рисует только по прямой, а не изгибами график, подскажите как поправить

let animationInterval;
let currentPosition = 0;
const canvas = document.getElementById("animationCanvas");
const ctx = canvas.getContext("2d");

function startAnimation() {
  stopAnimation(); // Остановить анимацию, если она уже запущена

  const x1Input = document.getElementById("x1");
  const x2Input = document.getElementById("x2");

  const x1 = parseFloat(x1Input.value);
  const x2 = parseFloat(x2Input.value);

  if (isNaN(x1) || isNaN(x2) || x1 < 0 || x2 < 0) {
    alert("Будь ласка, введіть коректні значення для x1 та x2.");
    return;
  }

  currentPosition = 0;

  // Определяем функцию, которая будет вызываться каждые 33 миллисекунды (приблизительно 30 раз в секунду)
  animationInterval = setInterval(() => {
    drawAnimation(x1, x2);
    currentPosition += 5; // Измените это значение в соответствии с вашими требованиями

    if (currentPosition >= canvas.width) {
      stopAnimation();
      alert("Анімацію завершено!");
    }
  }, 33);
}

function stopAnimation() {
  clearInterval(animationInterval);
}

function drawAnimation(x1, x2) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Рисуем линию
  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);
  ctx.lineTo(currentPosition, canvas.height / 2);
  ctx.stroke();

  // Рисуем точку в текущей позиции
  ctx.beginPath();
  ctx.arc(currentPosition, canvas.height / 2, 5, 0, 2 * Math.PI);
  ctx.fillStyle = "red";
  ctx.fill();
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 100vh;
}

canvas {
  border: 1px solid #000;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ruslan dev graph animation</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <label for="x1">x1:</label>
    <input type="number" id="x1" placeholder="Введіть x1" />

    <label for="x2">x2:</label>
    <input type="number" id="x2" placeholder="Введіть x2" />

    <button onclick="startAnimation()">Почати анімацію</button>
    <button onclick="stopAnimation()">Завершити анімацію</button>

    <canvas id="animationCanvas" width="500" height="300"></canvas>
  </body>
</html>

введите сюда код

БЛОГ НА HUSL

График canvas по координтам

Ответы (0 шт):