Объяснение, как работает HTML5 canvas transform

Для нетерпеливых сразу возможность поиграться

У метода canvas шесть аргументов, которые образуют три пары. Вы можете задавать свои значения и смотреть, как они влияют на систему координат, а можете ознакомиться с предустановленными.

Чем хорош метод canvas.transform

Трансформ хорош по нескольким причинам.

Во-первых, если понимать, как он работает, то он обеспечивает самую компактную запись преобразований.

Во-вторых, он сразу задаёт все аспекты трансформаций: и масштабирование, и отражение, и повороты, и другие аффинные искажения. Это не только компактно, но и избавляет от чувствительности к порядку операций преобразования координат.

В-третьих, он даёт доступ к преобразованиям, которые недоступны через другие другие методы (rotate, translate и scale).

В-четвёртых, он позволяет, как задавать абсолютные значения параметров преобразований координат (метод setTransform), так и относительные, относительно текущих. Это может быть полезным, когда имеет смысл уменьшить количество громоздких и капризных save/restore.

Чем плох метод canvas.transform

Хоть transform и удобен в очень многих случаях, злоупотреблять им не следует. Если вам требуется немного преобразований, то ваш код выиграет, если вы будете использовать более наглядные методы типа rotate(), а сброс/возврат трансформаций реализуете на стеке, который предоставляет контекст: save()/restore(). Всё зависит от задачи.

Чем странен метод canvas.transform

На FireFox 34 обнаружена странная особенность: если первый или третий параметр обращается в 0, то канва умирает(!) и больше на ней ничего не отрисовывается. В моём коде на этот случай есть хак.

Смысл параметров методов transform и setTransform

Смысл параметров методов transform и setTransform очень прост. Первая пара задаёт координаты нового вектора Ox. Вторая пара — вектора Oy. Третья пара — новые координаты точки начала координат.

В качестве координат, используются координаты в текущей системе координат. Без каких-либо преобразований.

Попробуйте вернуться к демьке выше и поиграться. Это очень просто.