В этом уроке вы узнаете, как использовать метод JavaScript rotate() для поворота элемента изображения .
rotate() — это метод контекста 2D-рисования. Метод rotate() позволяет вращать объект рисования на холсте.
Синтаксис:
ctx.rotate(angle)
Метод rotate() допускает угол поворота в радианах.
Если угол положительный, то вращение происходит по часовой стрелке. Если угол отрицательный, вращение происходит против часовой стрелки.
Чтобы преобразовать градус в радиан, используйте следующую формулу:
degree * Math.PI / 180
При добавлении поворота метод rotate() использует исходную точку холста в качестве центральной точки поворота.
На следующем рисунке показано вращение:
Если вы хотите изменить центральную точку вращения, вам нужно переместить исходную точку холста, используя метод translate() .
Пример
В следующем примере рисуется красный прямоугольник, начиная с центра холста. Затем он переводит начало холста в центр холста и рисует второй прямоугольник с поворотом на 45 градусов:
HTML
<canvas id="canvas" height="300" width="500">
</canvas>JavaScript
const canvas = document.querySelector('#canvas');
if (canvas.getContext) {
// rectangle's width and height
const width = 150,
height = 20;
// canvas center X and Y
const centerX = canvas.width / 2,
centerY = canvas.height / 2;
const ctx = canvas.getContext('2d');
// a red rectangle
ctx.fillStyle = 'red';
ctx.fillRect(centerX, centerY, width, height);
// move the origin to the canvas' center
ctx.translate(centerX, centerY);
// add 45 degrees rotation
ctx.rotate(45 * Math.PI / 180);
// draw the second rectangle
ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.fillRect(0, 0, width, height);
}Выход:
