Ответ 1
Итак, давайте нарисуем сетку на холсте 300x300:
http://jsfiddle.net/simonsarris/4uaZy/
Это будет сделано. Ничего особенного. Красная линия обозначает, где происхождение расположено, пробегая (0,0) и простираясь очень далеко, поэтому, когда мы переводим его, мы что-то увидим. Происхождение здесь - верхний левый угол, где красные линии встречаются в (0,0).
Все переводы ниже происходят до того, как мы нарисуем сетку, поэтому мы будем перемещать сетку. Это позволяет вам точно видеть, что происходит с оргиной.
Итак, давайте переведем холст на 100 100, переместив его вниз + вправо:
http://jsfiddle.net/simonsarris/4uaZy/1/
Итак, мы перевели источник, в котором красный X центрирован. Происхождение теперь составляет 100 100.
Теперь мы переведем, а затем масштабируем. Обратите внимание, как источник находится в том же месте, что и последнее изображение, все в два раза больше.
http://jsfiddle.net/simonsarris/4uaZy/2/
Boom. Оргин все еще на 100 100. Однако все надувается на 2. Происхождение изменилось, затем все надулось на месте.
Теперь посмотрим на них в обратном порядке. На этот раз мы масштабируем сначала, так что с самого начала все жирное:
http://jsfiddle.net/simonsarris/4uaZy/3/
Все надувается 2. Начальная точка находится в 0,0, ее начальной точке.
Теперь мы делаем масштаб, а затем перевод.
http://jsfiddle.net/simonsarris/4uaZy/4/
Мы переводим на 100 100 неподвижных, но начало координат переместилось на 200 200 в реальных пикселях. Сравните это с двумя предыдущими изображениями.
Это потому, что все, что происходит после шкалы, нужно масштабировать, включая дополнительные преобразования. Таким образом, преобразование на (100,100) на масштабированном холсте приводит к тому, что он перемещается на 200, 200.
В этой статье мы должны помнить, что изменение трансформации влияет на то, как вещи рисуются (или трансформируются!) с тех пор. Если вы масштабируете x2, а затем переводите, перевод будет x2
Если вы хотите, математически, посмотреть, что происходит на каждом шаге, я рекомендую вам ознакомиться с кодом здесь:
https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
Это имитирует весь процесс преобразования, выполненный с помощью canvas, и позволяет увидеть, как предыдущие преобразования изменяют те, которые появляются впоследствии.