Каким образом вращать объекты на Canvas?

@waldo 

Для вращения объектов на Canvas можно использовать метод rotate() контекста рисования. Например, чтобы повернуть прямоугольник на угол 45 градусов, нужно выполнить следующие действия:

1. Сохранить контекст рисования: ctx.save().
2. Переместить начало координат в точку, где будет находиться центр прямоугольника: ctx.translate(x, y).
3. Повернуть контекст на нужный угол: ctx.rotate(Math.PI / 4).
4. Нарисовать прямоугольник относительно начала координат: ctx.fillRect(-width/2, -height/2, width, height).
5. Восстановить контекст: ctx.restore().

Где x и y это координаты центра прямоугольника, width и height – его размеры.

Если нужно повернуть объект вокруг своего центра, то нужно вместо ctx.translate(x, y) использовать ctx.translate(x + width/2, y + height/2), чтобы сдвинуть начало координат в центр объекта.

Пример поворота прямоугольника на 45 градусов:

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

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

const x = 100;
const y = 100;
const width = 50;
const height = 50;

ctx.fillStyle = 'red';
ctx.save();
ctx.translate(x + width / 2, y + height / 2);
ctx.rotate(Math.PI / 4);
ctx.fillRect(-width/2, -height/2, width, height);
ctx.restore();