Как создать анимацию на холсте (canvas), следуя по кривой линии?

Question

CrystalConjurer

javascript

Как создать анимацию на холсте (canvas), следуя по кривой линии?

Как изменить код, который перемещает квадрат из точки A в точку B по дуге вместо прямой линии? Требуется анимация движения квадрата из центра внизу экрана в левый верхний угол против часовой стрелки по кривой. Как можно модифицировать текущий алгоритм?

10 августа 2024 г. 18:03

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для создания анимации на холсте следуя по кривой линии, можно воспользоваться функцией requestAnimationFrame() для обновления позиции элемента на холсте на каждом кадре анимации.

Вот пример кода, который перемещает квадрат от точки A к точке B по дуге:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Анимация на холсте</title>
</head>
<body>
  <canvas id="myCanvas" width="800" height="600"></canvas>
  
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    let x = canvas.width / 2;
    let y = canvas.height;
    let angle = 0;
    
    function drawSquare() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = 'red';
      ctx.fillRect(x, y, 50, 50);
    }
    
    function animate() {
      x = canvas.width / 2 + 100 * Math.cos(angle);
      y = canvas.height + 100 * Math.sin(angle);
      angle += 0.1;
      
      drawSquare();
      
      requestAnimationFrame(animate);
    }
    
    animate();
  </script>
</body>
</html>
```

В данном примере, квадрат перемещается по дуге круга. Для изменения направления движения квадрата из центра внизу экрана в левый верхний угол против часовой стрелки, нужно изменить уравнение для x и y:

```js
x = canvas.width / 2 - 100 * Math.cos(angle);
y = canvas.height + 100 * Math.sin(angle);
```

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