Трансформация

Рассмотрим пять методов трансформации:

• translate(x, y). Применяется для переноса начала координат.
• rotate(angle). Поворачивает холст вокруг начала координат на указанный угол.
• scale(x, y). Масштабирует все нарисованные на холсте элементы.
• transform(m1, m2, m3, m4, dx, dy). Применяет новую матрицу трансформаций поверх текущей, модифицируя таким образом весь холст.
• setTransform(m1, m2, m3, m4, dx, dy). Отменяет текущую трансформацию и определяет новую на основе переданных в атрибуте значений.

Применимы к одному тексту методы translate(), rotate() и scale().

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.font = "bold 20px verdana, sans-serif";
  canvas.fillText("TEST", 50, 20);
  canvas.translate(50, 70);
  canvas.rotate(Math.PI / 180 * 45);
  canvas.fillText("TEST", 0, 0);
  canvas.rotate(-Math.PI / 180 * 45);
  canvas.translate(0, 100);
  canvas.scale(2, 2);
  canvas.fillText("TEST", 0, 0);
}
addEventListener("load", initiate);

Сперва мы нарисовали текст на холсте в точке с координатами (50, 20) с размером 20 px. После этого, с помощью метода translate() перенесли начало координат в точку (50, 70) и, с помощью метода rotate(), повернули холст на 45 градусов.

После этого, определенные в предыдущем шаге значения, считаются значениями по умолчанию. Поэтому, для того чтобы вернуть текст в исходное состояние, снова вызываем rotate() c такими же, но отрицательными значениями. Наконец, с помощью метода scale() увеличиваем масштаб холста.

Каждая последующая трансформация накладывается на предыдущую. Например, если мы применим масштабирование scale(2, 2), а затем еще раз scale(2, 2), то холст увеличится в четыре раза.

Для определения характеристик матрицы используются методы trasform() и setTransform().

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.transform(3, 0, 0, 1, 0, 0);
  canvas.font = "bold 20px verdana, sans-serif";
  canvas.fillText("TEST", 20, 20);
  canvas.transform(1, 0, 0, 10, 0, 0);
  canvas.font = "bold 20px verdana, sans-serif";
  canvas.fillText("TEST", 20, 20);
}
addEventListener("load", initiate);

Восстановление состояния

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

• save(). Сохраняет состояние холста, включая все определенные для него ранее трансформации, значения свойств, стилей и т.д.
• restore(). Восстанавливает последнее сохраненное состояние.

Отмена предыдущих трансформаций:

function initiate(){
  var elem = document.getElementById('canvas');
  var canvas = elem.getContext('2d');
  canvas.save();
  canvas.translate(50, 70);
  canvas.font = "bold 20px verdana, sans-serif";
  canvas.fillText("TEST1", 0, 30);
  canvas.restore();
  canvas.fillText("TEST2", 0, 30);
}
addEventListener("load", initiate);