CanvasRenderingContext2D: метод rotate()

Метод CanvasRenderingContext2D.rotate() API 2D-карт добавляет поворот к матрице преобразований.

angle

Угол поворота по часовой стрелке в радианах. Вы можете использовать degree * Math.PI / 180 для расчета радианов из градусов.

Центр поворота всегда совпадает с началом координат холста. Для изменения центра поворота необходимо сдвинуть холст, используя метод translate().

None (undefined).

В этом примере прямоугольник поворачивается на 45°. Обратите внимание, что центр поворота находится в верхнем левом углу холста, а не относительно какой-либо фигуры.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Point of transform origin
ctx.arc(0, 0, 5, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

// Non-rotated rectangle
ctx.fillStyle = "gray";
ctx.fillRect(100, 0, 80, 20);

// Rotated rectangle
ctx.rotate((45 * Math.PI) / 180);
ctx.fillStyle = "red";
ctx.fillRect(100, 0, 80, 20);

// Reset transformation matrix to the identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

Результат

Центр поворота синий. Неповернутый прямоугольник серый, а повернутый — красный.

В этом примере фигура поворачивается вокруг её центра. Для этого выполняется следующие действия над матрицей:

1. Сначала, translate() перемещает начало координат матрицы в центр фигуры.
2. rotate() поворачивает матрицу на нужный угол.
3. Наконец, translate() перемещает начало координат матрицы обратно в исходную точку. Это делается путём применения отрицательных значений координат центра фигуры.

HTML

<canvas id="canvas"></canvas>

JavaScript

Фигура — прямоугольник с углом в (80, 60), шириной 140 и высотой 30. Горизонтальный центр находится в (80 + 140 / 2), или 150. Вертикальный центр находится в (60 + 30 / 2), или 75. Таким образом, центр фигуры находится в (150, 75).

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Non-rotated rectangle
ctx.fillStyle = "gray";
ctx.fillRect(80, 60, 140, 30);

// Matrix transformation
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

// Rotated rectangle
ctx.fillStyle = "red";
ctx.fillRect(80, 60, 140, 30);

Результат

Неповернутый прямоугольник серый, а повернутый — красный.

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D