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