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

Мы уже применяли в силу необходимости метод translate(), теперь давайте разберемся с некоторыми трансформациями изображений подробнее.

Упомянутый метод просто сдвигает пространство рисования на заданное значение по двум координатам:


Рис. 47. Инвертируем цвета

Context. franslate(150,150):

Метод rotate() — на угол, заданный в радианах. Поворот осуществляется вокруг точки, заданной предварительно f ranslate(). По умолчание это будет точка с координатами (0,0).

Метод scale() отвечает за масштабирование. В качестве аргументов он принимает коэффициенты масштабирования по двум координатам.

Попробуем помучить нашу рожицу снова:

Context. translate(150,150): context. fcale (0,7,1.2): context. гotate (1): context. translate(-150,-150); context. beginPath():

Все эти преобразования мы проводим до начала рисования, не забываем — трансформации применяются к холсту, а не к рисунку. Именно поэтому нужен последний метод context. translate() — он возвращает точку отсчета координат на прежнее место.

Метод context. translate() несколько посложнее:

SetTransform(m11, m12, m21, m22, dx, dy)

Первый и четвертый аргументы этого метода задают линейное масштабирование (как scale() — пиксели отображаются с заданным коэффициентом). Второй же и третий ведут себя следующим образом: каждый пиксель по обоим измерениям (x, y) смещается на y*m21 пикселей вправо и на x*m12 пикселей вниз. Это означает, что при m21=1 и m22 = 2 каждая следующая строчка будет смещена на 1 пиксель вправо и на 2 вниз относительно предыдущей. Последние два аргумента соответствуют переносу точки отсчета (как и translate()).

Попробуем метод на практике:

context. translate(150,150):

context. scale (0,7,1.2);

context. rotate (1);

context. translate(-150,-150):

Context. ietTransform(0.866, -0.5, 0.866, 0.5, 0, 100); context. beginPath();

Результат — на рис. 48. Что мы тут натворили? Да просто произвели с рисунком изометрические преобразования, положив рожицу набок.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *