Преобразования в Canvas

Преобразования в Canvas позволяют изменять положение, размер, вращение и искажение элементов, рисуемых на холсте. С помощью преобразований можно создавать сложные и динамичные визуальные эффекты.

Преобразования включают в себя сдвиг (translate), вращение (rotate), масштабирование (scale) и искажение (transform).

Сдвиг (Translate)

Сдвиг (Translate) позволяет перемещать начало координат и элементы на холсте в определенном направлении. Это полезное преобразование, которое позволяет создавать анимации, располагать объекты в нужных местах и создавать сложные композиции из простых фигур.

Использование метода translate()

Метод translate()  сдвигает начало координат холста на заданные значения по горизонтали и вертикали. После сдвига все последующие операции рисования будут выполняться относительно нового начала координат.

Cинтаксис:

translate(x, y);

Параметры:

Пример:

// Нарисуем квадрат до сдвига
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Сдвиг начала координат на (100, 50)
ctx.translate(100, 50);

// Нарисуем квадрат после сдвига
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);

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

Результат:

Совмещение сдвигов

Вы можете вызывать translate() несколько раз для применения нескольких сдвигов последовательно.

ctx.translate(50, 50); // Сдвиг на (50, 50)
ctx.translate(100, 0); // Сдвиг на (100, 0)

Обратный сдвиг

Чтобы вернуть начало координат к исходному состоянию, примените обратный сдвиг с отрицательными значениями.

ctx.translate(-100, -50); // Обратный сдвиг на (-100, -50)

Вращение (Rotate)

Вращение (Rotate) поворачивать элементы относительно их начальной позиции. 

Использование метода rotate()

Метод rotate() контекста рисования вращает координатную систему холста на заданный угол в радианах.

Cинтаксис:

rotate(angle);

Параметры:

Пример:

// Сдвиг начала координат на (100, 0)
ctx.translate(100, 0);

// Нарисуем квадрат до вращения
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Вращение координатной системы на 45 градусов
ctx.rotate(Math.PI / 4);

// Нарисуем квадрат после вращения
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

В этом примере второй квадрат будет нарисован после поворота координатной системы на 45 градусов. Все последующие операции рисования будут выполняться относительно повернутой системы координат.

Результат:

Масштабирование (Scale)

Масштабирование (Scale) позволяет изменять размер элементов, нарисованных на холсте. Это преобразование позволяет увеличивать или уменьшать объекты, создавать эффекты перспективы и применять масштабирование в анимациях.

Использование метода scale()

Метод scale() контекста рисования масштабирует объекты на холсте по горизонтали и вертикали.

Cинтаксис:

scale(scaleX, scaleY);

Параметры:

Пример:

// Нарисуем круг до масштабирования
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

// Масштабирование объекта
ctx.scale(1.5, 1.5);

// Нарисуем круг после масштабирования
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

В этом примере второй круг будет нарисован после масштабирования по горизонтали в 1.5 раза. Масштабирование применяется ко всем последующим операциям рисования, и все они будут масштабироваться с использованием указанных коэффициентов.

Результат:

Искажение (Transform)

Метод transform() позволяет производить произвольные преобразования объектов, такие как сдвиг, масштабирование, вращение и искажение. Этот метод применяет матрицу трансформации к текущему состоянию контекста рисования, что позволяет создавать сложные визуальные эффекты.

Использование метода transform()

Метод transform() позволяет производить произвольные преобразования путем применения матрицы трансформации.

Cинтаксис:

transform(a, b, c, d, e, f)

Параметры:

Матрица трансформации имеет следующий вид:

| a  c  e |
| b  d  f |
| 0  0  1 |

Пример:

// Нарисуем круг до масштабирования
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

// Масштабирование объекта
ctx.scale(1.5, 1.5);

// Нарисуем круг после масштабирования
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

В этом примере transform(1, 0.5, 0.5, 1, 0, 0) применяет искажение, увеличивая квадрат по горизонтали вдвое и сжимая по вертикали вдвое. Коэффициенты a, b, c и d определяют масштабирование и искажение, а e и f определяют сдвиг.

Результат: