172 • Глава 5
ИСПОЛЬЗОВАНИЕ ТРАНСФОРМЕРОВ: ЗАМАСКИРОВАННЫЕ ПИКСЕЛЫ Можно перемещать карандаш по холсту с помощью таких методов, как
moveTo
, можно
рисовать формы и линии, но у API
canvas
есть и еще одна интересная возможность —
благодаря трансформациям он позволяет менять холст под карандашом.
Методы трансформации включают вращение, масштабирование, преображение и транс-
ляцию (все они схожи со своими эквивалентами в CSS).
На рис. 5.12 вы видите нарисованную спираль; моя цель — заставить ее вращаться вокруг
своей оси, создавая псевдогипнотический эффект. Ради простоты кода мне не хотелось бы
менять функцию рисования спирали, положение спирали на экране, начальные точки или
какие-либо другие характеристики. Для того чтобы сделать код понятным и управляемым,
я буду менять не спираль, а холст. Спираль будет оставаться неизменной, а холст на каждом
шаге будет поворачиваться на небольшой угол.
Метод
rotate
поворачивает холст вокруг координаты (0, 0), то есть по умолчанию — вокруг
верхнего левого угла. Меня это не устраивает, потому что при таком раскладе спираль будет
уезжать с экрана, словно она находится на конце маятника. У меня холст должен вращаться
вокруг центра спирали, которую я помещу в центр холста. Следовательно, я должен вра-
щать холст вокруг его центра.
Поможет мне в этом метод
translate
. Он перемещает координату (0, 0) в новое место.
На рис. 5.13 вы видите точку и координаты, которые я передавал методу
translate
. При
каждом выполнении
translate
превращает указанные координаты в точку (0, 0). Обратите
внимание, что этот метод не поворачивает и не перемещает холст, хотя зрителю может по-
казаться именно так; он изменяет базовую систему координат, на которой основываются
все функции рисования.
