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

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

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

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

Трансформация поворота принимает только один аргумент, и это аргумент angle. Угол определяет то, как будет сделан поворот, после того как вы установили трансформацию поворота. Помните, что он измеряется в радианах, а не в градусах. Давайте перейдем к коду и посмотрим на поворот. Вот раздел Rotate Transform из файла snippets, открываем пример rotate. Я хочу вам показать несколько примеров.

Первым будет очень простой пример. Копируем, вставляем. Здесь я устанавливаю fillStyle для контекста на blue, заполняю прямоугольник на 150 и 30, то есть, X будет 150, Y будет 30, а прямоугольник будет 100 пикселей шириной и 50 пикселей высотой. Затем я делаю поворот на половину радиана и рисую тот же прямоугольник в том же месте.

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

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

Сначала я переношу исходную точку из верхнего левого угла прямо в центр canvas. То есть, я делю ширину и высоту наполовину и таким образом получаю середину. Затем я высчитываю радиан, эквивалентный повороту в 20 градусов. Также у меня есть цикл for, который начинается с 0, идет до 360 и постоянно увеличивает градусы на 20. То есть, я разделил это на точное число шагов, в данном случае на 18, и при каждом шаге будет совершаться поворот на 20 градусов.

Каждый раз мы будем обрамлять линию, и давайте посмотрим, как это выглядит. Иду в браузер и обновляю страницу, и вы видите, что исходная линия, которую я нарисовал, поворачивается вокруг себя за 18 шагов, каждый раз на 20 градусов. Итак, еще раз, я сделал переход в середину canvas. Затем я сделал перемещение на минус 100 пикселей, что обозначает, что я перешел влево по направлению X, затем я вызвал lineTo 100 в положительном направлении X. То есть, я создал линию в 200 пикселей с центром в текущей исходной точке, которая является центром canvas, и она постоянно поворачивается.

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