Мы уже применяли в силу необходимости метод 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. Что мы тут натворили? Да просто произвели с рисунком изометрические преобразования, положив рожицу набок.
Добавить комментарий