Для сужения или растяжения отрезка, определенного двумя точками, на Canvas с учетом угла между отрезком и горизонтальной осью, вам нужно учесть следующие моменты:
1. **Определение угла** между отрезком и горизонтом. Это можно сделать с помощью функции `Math.atan2`.
2. **Пропорциональное смещение** точек. Вам нужно будет учитывать угол для определения того, насколько смещать каждую из точек.
Пример решения задачи в JavaScript может выглядеть следующим образом:
```javascript
function stretchSegment(pointA, pointB, scale) {
// Вычисляем вектор от точки A к точке B
const dx = pointB.x - pointA.x;
const dy = pointB.y - pointA.y;
// Длина отрезка
const length = Math.sqrt(dx * dx + dy * dy);
// Если длина отрезка нулевая, ничего не делаем
if (length === 0) return;
// Вычисляем новый вектор
const newLength = length * scale;
const unitX = dx / length; // Нормализованный вектор по X
const unitY = dy / length; // Нормализованный вектор по Y
// Определяем новые координаты для точек A и B
const newDx = unitX * newLength;
const newDy = unitY * newLength;
// Для растяжения отрезка с вершиной A
pointB.x = pointA.x + newDx;
pointB.y = pointA.y + newDy;
}
// Пример использования
const pointA = { x: 100, y: 100 };
const pointB = { x: 200, y: 150 };
// Состояние - растянуть отрезок в 1.5 раза
stretchSegment(pointA, pointB, 1.5);
// Ваша функция для рисования на Canvas
function drawLine(ctx, pointA, pointB) {
ctx.beginPath();
ctx.moveTo(pointA.x, pointA.y);
ctx.lineTo(pointB.x, pointB.y);
ctx.stroke();
}
// Пример рисования на Canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawLine(ctx, pointA, pointB);
```
### Пояснение к коду:
- **stretchSegment**: Эта функция принимает две точки и коэффициент масштабирования (scale). Она вычисляет разницу между координатами двух точек, нормализует их и масштабирует вектор.
- **drawLine**: Эта функция рисует линию между двумя точками на канвасе.
Если вы хотите, чтобы отрезок сужался, вам просто нужно передать значение scale меньше 1 в функцию `stretchSegment`.
### Примечания:
- Убедитесь, что вы корректно обрабатываете ситуации, когда точки совпадают, так как в этом случае не имеет смысла проводить сужение или растяжение.
- Используйте вызовы `ctx.clearRect()` и `ctx.stroke()` для обновления канваса при каждом изменении отрезка.