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

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

Вы можете применить преобразования ко всему содержимому, нарисованного на холсте HTML5. Вот список доступных для применения преобразований:

• Перемещение (перемещение нарисованного содержимого)

• Вращение

• Масштабирование

В этой статье описаны все эти преобразования

Преобразовательная матрица

Вы можете установить преобразовательную матрицу в 2D контексте. Эта матрица будет умножена на все содержимое, нарисованного на холсте. Для примеров, используемых в этом руководстве, я установил ее в матрицу "идентичность", которая умножает набор координат x, y на x, y. Иными словами, не выполняется никакое преобразование.
Вот как можно установить преобразовательную матрицу в единичную матрицу:

context.setTransform(1, 0, 0, 1, 0, 0);

Перемещение

Можете применить перемещение ко всему содержимому, нарисованного на холсте. Перемещение означает перерасположение нарисованного.

var x = 100;
var y = 50;
context.translate(x, y);

Этот пример будет передвигать все shapes, нарисованные на холсте, на 100 по оси x и на 50 по оси y.
Внимание: трансляция доступна только для форм, нарисованных после вызова функции translate(). Формы, нарисованные до вызова этой функции, не受到影响.
Вот другой пример. Два прямоугольника нарисованы в тех же координатах, но один нарисован до вызова функции translate(), а другой - после.

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas не поддерживается
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 100, 100);
context.translate(50, 25);
context.fillStyle = "#0000ff";
context.fillRect(10, 10, 100, 100);
</script>

Вот результат нарисованного на холсте:

Вращение

Вы можете применить автоматическое вращение ко всем формам, нарисованным на холсте HTML5. Это выполняется с помощью функции rotate() в 2D контексте. Вот простой пример:

context.rotate(radians);

Угол вращения передается в качестве параметра функции rotate(). Это значение должно быть выражено в градусах弧, а не в градусах.
Все shapes, нарисованные после вращения, будут вращаться вокруг точки 0,0 на холсте. Это верхний левый угол холста.
Как и трансляция, вращение применяется только к всем формам, нарисованным после вызова функции rotate().
Вот пример рисования одного и того же прямоугольника до и после установки вращения:

<canvas id="ex2" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas не поддерживается
</canvas>
<script>
　var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
　context.fillStyle = "#ff0000";
　context.fillRect(10, 10, 100, 100);
　context.rotate((Math.PI / 180) * 25); //вращение на 25 градусов
　context.fillStyle = "#0000ff";
　context.fillRect(10, 10, 100, 100);
</script>

Вот как это выглядит при рисовании прямоугольника на канве:

Вращение вокруг другой точки

Как уже упоминалось, все формы вращаются вокруг левого верхнего угла канвы (0,0). Но что если вы хотите повернуть форму вокруг другого точки? Например, вокруг ее собственного центра?
Чтобы повернуть форму вокруг ее собственного центра, сначала необходимо перевести канву в центр формы, затем повернуть канву, затем вернуть канву в 0,0 и затем нарисовать форму.
Это пример кода, который позволяет вращать синий прямоугольник вокруг его центра:

<canvas id="ex3" width="500" height="150" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas не поддерживается
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var width = 100;
var height = 100
var cx = x + 0.5 * width;
var cy = y + 0.5 * height;
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.translate(cx, cy);
context.rotate((Math.PI / 180) * 25); //вращение на 25 градусов
context.translate(-cx, -cy); //возвратить центр в 0,0
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Вот как это выглядит при рисовании на канве:

Этот пример сначала переводит центр канвы (перенос) в центр квадрата (cx, cy). Затем канва вращается на 25 градусов. Затем она снова преобразуется в 0,0. Теперь канва вращается вокруг cx, cy на 25 градусов. Все, что вы рисуете, будет отображаться вокруг cx, cy. В конце концов, прямоугольник рисуется так, будто ничего не произошло, но теперь он вращается вокруг cx, cy на 25 градусов. Это можно сделать, используя только вызовы преобразований. Координаты прямоугольника не изменяются. Обратите внимание на вызовы context.fillRect() для рисования красного и синего прямоугольников, как они одинаковы. Это именно они между собой вызовы преобразований, которые делают их видными в различных местах и с различным вращением.

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

Можно применить автоматическое масштабирование ко всем формам, нарисованным на HTML5 холсте.
При масштабировании можно масштабировать все координаты по осям x и y с помощью некоторых факторов. Вы можете установить эти факторы с помощью функции scale(), как показано ниже:

var scaleX = 2;
var scaleY = 2;
context.scale(scaleX, scaleY);

Этот пример масштабирует все координаты по оси x и y в два раза.
Как и translate() и rotate(), масштаб применяется только к формам, нарисованным после вызова scale().
Это еще один пример кода для рисования красного и голубого прямоугольников, где масштаб применяется только к голубому прямоугольнику:

<canvas id="ex5" width="500" height="250" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas не поддерживается
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var width = 100;
var height = 100
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.scale(2, 2);
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

Это graphics, созданные на холсте:

Обратите внимание, что размер голубого прямоугольника в два раза больше, чем размер красного прямоугольника.
Внимание, расстояние от верхнего левого угла голубого прямоугольника до верхнего левого угла холста (0,0) также в два раза. Все координаты уменьшены в два раза, и координаты верхнего левого угла прямоугольника также.

Соотношение масштабирования

Вы можете использовать функцию масштабирования для реализации функции масштабирования по пропорции. На этом канвасе содержится 4 прямоугольника. Под канвасом есть поле ввода, которое можно использовать для изменения уровня масштабирования (коэффициента масштабирования).

Степень масштабирования:

Если вы видите текстовое поле с значением масштаба, введите масштаб между 1 и 10, затем выйдите из текстового поля, чтобы увидеть результат. Если вы видите ползунок, просто передвиньте его.

Комбинация перевода, вращения и масштабирования

Конечно, все три преобразования можно комбинировать на одном канвасе. Но, как и при комбинировании вращения и перевода, порядок вызова функций контекста 2D также важен. Если scale() вызывается до translate() и т.д., результат может отличаться. Возможно, вам нужно будет изменить порядок вызова функций, чтобы они работали правильно