Можностей, предоставляемых веб-разработчикам


  •  Глава 5 ИСПОЛЬЗОВАНИЕ ТРАНСФОРМЕРОВ: ЗАМАСКИРОВАННЫЕ ПИКСЕЛЫ



Pdf көрінісі
бет196/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   192   193   194   195   196   197   198   199   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

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


Достарыңызбен бөлісу:
1   ...   192   193   194   195   196   197   198   199   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет