Есть код, который перемещает квадрат из точки А в точку Б по прямой. А как можно сделать, чтобы траектория была немного по дуге? Немного не силен в математике, направьте в нужную сторону плиз
Нужно, чтобы квадрат из низа центра плавно переместился в левый верхний угол, но не по прямой, а по кривой (против часовой стрелки)
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const squareSize = 50; // Размер квадрата
let x = (canvas.width - squareSize) / 2; // Начальная позиция по X (центр)
let y = canvas.height - squareSize; // Начальная позиция по Y (внизу)
const targetX = 0; // Целевая позиция по X
const targetY = 0; // Целевая позиция по Y
const speed = 2; // Скорость перемещения квадрата
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищаем canvas
// Вычисляем вектор направления к целевой позиции
const dx = targetX - x;
const dy = targetY - y;
// Рассчитываем длину вектора
const distance = Math.sqrt(dx * dx + dy * dy);
// Если квадрат еще не достиг целевой позиции
if (distance > speed) {
// Нормализуем вектор и умножаем на скорость
x += (dx / distance) * speed;
y += (dy / distance) * speed;
} else {
// Если квадрат близок к целевой позиции, устанавливаем его точно в целевую позицию
x = targetX;
y = targetY;
}
ctx.fillStyle = (x === targetX && y === targetY) ? 'red' : 'blue'; // Меняем цвет при достижении цели
ctx.fillRect(x, y, squareSize, squareSize); // Рисуем квадрат
// Продолжаем анимацию до тех пор, пока квадрат не достигнет целевой позиции
if (x !== targetX || y !== targetY) {
requestAnimationFrame(animate);
}
}
animate();
