Предыдущий ролик Следующий ролик  

Видео урок: Трансформация объектов при помощи translate

HTML5: графика и анимация с Canvas

В этой главе мы рассмотрим некоторые довольно продвинутые операции с canvas, и по факту некоторые из них не являются обязательными возможностями, которые позволяют рисовать, но они определенно в высокой степени влияют на результаты операций по рисованию, которые мы изучили ранее в этом курсе. И начнем мы с рассмотрения трансформаций. Трансформации сильно влияют на то, как объекты рисуются в canvas, чтобы достичь довольно общих эффектов, которые однако сложно запрограммировать.

Есть три базовые трансформации, которые предлагает canvas. Это перемещение, масштабирование и поворот, а также вы можете определить собственные трансформации. Трансформации влияют на все операции по рисованию, которые идут после них, и они добавляются друг к другу. Каждая трансформация добавляется к результатам предыдущей. Как и другие глобальные свойства canvas, например, ширина, трансформации влияют на все.

Вы определяете трансформацию, используете ее, а затем выполняете некоторые операции по рисованию. Поскольку трансформации добавляются друг к другу, сохранение и восстановление состояния canvas может действительно пригодиться. Давайте рассмотрим трансформацию перемещения. Это самая простая трансформация, и все, что она делает, это перемещает источник canvas на новую позицию. И делаете вы это при помощи функции translate с числом, чтобы переместить источник в направлении X, и числом, чтобы переместить источник а направлении Y.

Давайте представим, что у вас есть canvas, и в верхнем левом углу canvas находится текущая исходная точка. Сейчас это точка 0,0. Если вы используете функцию translate, чтобы переместить исходную точку по X и Y, тогда все, что вы делаете, это просто перемещаете ее на новую позицию. Тогда все, что было нарисовано в 0,0, перемещается на новую точку в canvas. Давайте посмотрим, как это работает. Переходим к коду. Я в редакторе кода в файле snippets, вот раздел Translate Transform.

Открываем наш пример, переходим в папку Advanced, и вот нужный нам пример - translate_start. Сейчас мы скопируем немного кода, копируем вот этот кусок, а затем вставляем его сюда. Прежде чем мы приступим к примеру, я хочу пояснить вам кое-что про translate, сохраняем, переходим в браузер и обновляем страницу. Вы видите, что я рисую синий прямоугольник в начальной точке 0,0. Если мы вернемся к коду, вы видите, что вот она, по координатам 0,0. Наш прямоугольник 100 пикселей в ширину и 50 в высоту. Если вы уберете комментарий с translate, то тогда функция будет вызвана, тогда я получаю ширину canvas, и она делится наполовину, а также я получаю высоту canvas, и она делится наполовину. Таким образом исходник canvas переместится прямо на середину, на половину высоты и на половину ширины.

Если я снова вызову fillRect, даже если я скажу, чтобы рисование началось в точке 0,0, исходник переместится в середину canvas. Итак, второй прямоугольник будет вырисован в середине canvas. Сохраняем, возвращаемся в браузер и обновляем страницу. Вы видите два прямоугольника. Они оба нарисованы с точки 0,0. Но в первом примере 0,0 находится тут, а после вызова translate 0,0 перемещается сюда.

Это может быть очень полезным, если вы создаете набор объектов, которые должны быть нарисованы в canvas в разных местах, а результаты этих местоположений высчитываются разными способами. Вместо того чтобы отслеживать все эти точки, вы можете просто переместить исходник туда, куда хотите, нарисовать все, что вам нужно, а затем вернуться к предыдущему состоянию. В этом примере мы рассмотрели базовую трансформацию по перемещению, переставляя начальную точку и влияя на то, где будут нарисованы объекты..