Как использовать трансформации для объектов на Canvas?

@willie_grady 

Для использования трансформаций для объектов на Canvas нужно использовать метод transform() или setTransform() на контексте Canvas.

Синтаксис метода transform() выглядит так: context.transform(a, b, c, d, e, f). Этот метод изменяет текущую матрицу трансформаций, применяя указанные коэффициенты.

Параметры метода transform():

• a - масштабирование по оси X
• b - наклон по оси X
• c - наклон по оси Y
• d - масштабирование по оси Y
• e - смещение по оси X
• f - смещение по оси Y

Синтаксис метода setTransform() выглядит так: context.setTransform(a, b, c, d, e, f). Этот метод заменяет текущую матрицу трансформаций на новую матрицу.

Параметры метода setTransform() аналогичны методу transform().

Пример использования трансформаций на Canvas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

// Нарисовать квадрат
context.fillStyle = 'red';
context.fillRect(50, 50, 100, 100);

// Сместить и повернуть квадрат
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.fillStyle = 'green';
context.fillRect(-50, -50, 100, 100);

В этом примере сначала рисуется красный квадрат на координатах (50, 50). Затем контекст смещается на (100, 100) и поворачивается на 45 градусов. После этого на том же месте рисуется зеленый квадрат. Благодаря трансформациям, он будет отображаться наклонно и повернуто на 45 градусов.