Шрифт:
//У' = У + ку*х;
function shear(c, кх, ку) { с.transform(1, ку, кх, 1, 0, 0); }
// Вращение на theta радиан по часовой стрелке вокруг точки (х,у). Это преобразование
// можно выполнить с помощью последовательности вызовов методов translate,rotate,translate
function rotateAbout(c,theta,x,у) {
var ct = Math.cos(theta),
st = Math.sin(theta);
c.transform(ct, -st, st, ct, -x*ct-y*st+x, x*st-y*ct+y);
}
Метод
setTransform
принимает те же аргументы, что и метод transform,
но вместо преобразования текущей системы координат он выполняет преобразование системы координат по умолчанию и делает результат новой текущей системой координат. Метод setTransform
удобно использовать для временного возврата к системе координат по умолчанию:
c.save; // Сохранить текущую систему координат
с.setTransform(1,0,0,1,0,0): // Вернуться к системе координат по умолчанию
// Выполнить операции с использованием координат по умолчанию CSS-пикселов
c.restore; // Восстановить сохраненную систему координат
21.4.4.2. Примеры преобразований
Пример 21.6 демонстрирует мощь, которую дает возможность преобразования системы координат, где за счет рекурсивного применения методов
translate, rotate
и scale
реализовано рисование фракталов - снежинок Коха. Результат работы этого примера представлен на рис. 21.8, где показаны снежинки Коха с количеством уровней рекурсии 0, 1, 2, 3 и 4.
Эти фигуры воспроизводятся весьма изящным программным кодом, но в нем используются рекурсивные преобразования системы координат, что делает его сложным для понимания. Даже если вы не собираетесь углубляться в изучение всех тонкостей примера, обратите все же внимание, что в нем имеется всего один вызов метода
lineTo
. Каждый отдельный сегмент на рис. 21.8 рисуется следующим образом:
с.lineТо(len, 0);
Значение переменной
len
не изменяется в ходе выполнения программы, поэтому позиция, ориентация и длина каждой линии определяется операциями смещения, вращения и масштабирования. Пример 21.6. Рисование снежинок Коха посредством преобразований системы координат
var deg = Math.PI/180; // Для преобразования градусов в радианы
// Рисует n-уровневый фрактал снежинки Коха в контексте холста с, левый нижний угол
// которого имеет координаты (х,у), а длина стороны равна len.
function snowflake(c, п, х, у, len) {
c.saveO; // Сохранить текущее преобразование
с.translated,у); // Сместить начало координат в начальную точку
с.moveTo(0,0); // Новый фрагмент контура в новом начале координат
leg(n); // Нарисовать первую ветвь снежинки
с.rotate(-120*deg); // Поворот на 120 градусов против часовой стрелки
leg(n); // Нарисовать вторую ветвь
с.rotate(-120*deg); //Поворот
leg(n); // Нарисовать последнюю ветвь
с.closePath; // Замкнуть фрагмент контура
c.restoreO; // Восстановить прежнее преобразование
// Рисует одну ветвь n-уровневой снежинки Коха. Эта функция оставляет
// текущую позицию в конце нарисованной ветви и смещает начало координат так,
// что текущая точка оказывается в позиции (0,0).