JavaScript. Подробное руководство, 6-е издание, стр. 360
Метод
<b>setTransform()</b>Метод
<b>translate()</b><b>rotate()</b><b>Canvas</b><b>Math.PI</b><b>scale()</b>Передача отрицательного коэффициента масштабирования методу
<b>scale()</b><b>translate()</b><b>scale()</b>
21.4.4.1. Математический смысл преобразований
На мой взгляд, проще всего разбираться с преобразованиями, имея их геометрическое представление, когда действие методов
<b>translate(), rotate()</b><b>scale()</b>Вызов метода
<b>c.translate(dx,dy)</b><b>х' = х + dx; // Значение 0 координаты X в новой системе координат</b><b> // соответствует значению dx в старой системе координат</b><b>у' = у + dy;</b>Операцию масштабирования также можно представить в виде простых уравнений. Вызов метода
<b>c.scale(sx.sy)</b><b>х' = sx * х;</b><b>У' = sy * у;</b>Операция вращения выглядит несколько сложнее. Вызов
<b>с.rotate(a)</b><b>х' = х * cos(a) - у * sin(a);</b><b>у’ = у * cos(a) + х * sin(a);</b>Обратите внимание, что порядок выполнения преобразований имеет большое значение. Допустим, что изначально используется система координат холста по умолчанию, после чего выполняется смещение и затем масштабирование. Чтобы отобразить координаты точки (х,у) в текущей системе координат обратно в координаты (х",у") в системе координат по умолчанию, необходимо сначала применить уравнения масштабирования, чтобы отобразить координаты точки в промежуточные координаты (х',у') точки в смещенной, но не масштабированной системе координат, а затем применить уравнения смещения, чтобы отобразить эти промежуточные координаты точки в координаты (х",у"). В результате получим следующую систему уравнений:
<b>х'' = sx*x + dx; </b><b>у'' = sy*y + dy;</b>Если же к исходной системе координат сначала применялся метод
<b>scale ()</b><b>translate(),</b><b>х" = sx*(x + dx); </b><b>у" = sy*(у + dy);</b>При использовании алгебраических представлений последовательностей преобразований важно помнить, что в уравнениях они должны следовать в обратном порядке - от последнего преобразования к первому. Однако при использовании геометрических представлений вы работаете с последовательностями преобразований в прямом порядке, от первого к последнему.
Преобразования, поддерживаемые холстом, известны как аффинные преобразования. Аффинные преобразования могут изменять расстояния между точками и углы между линиями, но параллельные линии всегда остаются параллельными после любых аффинных преобразований - с помощью аффинных преобразований нельзя, например, создать эффект искажения типа «рыбий глаз». Любое аффинное преобразование можно описать с помощью шести параметров от а до f, как показано в следующих уравнениях:
<b>х' = ах + су + е</b><b>у' = bx + dy + f</b>К текущей системе координат можно применять любые преобразования, передавая эти шесть параметров методу
<b>transform()</b><b>transfоrm()</b><b>// Сдвиг:</b><b>//х' = х + кх*у;</b><b>//У' = У + ку*х;</b><b>function shear(c, кх, ку) { с.transform(1, ку, кх, 1, 0, 0); }</b><b>// Вращение на theta радиан по часовой стрелке вокруг точки (х,у). Это преобразование</b>