<< Вывод ошибок в PHP Локализация числовых/денежных данных >>

Поворот изображения на html5 canvas

Возможно, вы уже знаете что есть удобный метод canvas context drawImage:

context.drawImage(image, x, y);

где image - это DOM изображение (или другой canvas), x, y - левый верхний край изображения. Также там есть несколько опциональных параметров, но мы не будем их сегодня использовать. (Можете посмотреть чит-лист по canvas, который мы разместили вчера, если любознательны).

Что неочевидно, так это как отрисовать повернутое изображение. Вы, наверное, думаете, что должен быть параметр angle, который можно передать в drawImage? Но как бы не так, вам придется полностью повернуть систему координат перед отрисовкой.

Пример, с настроенным canvas context и загруженной картинкой, готовой к использованию:

context.drawImage(logoImage, 50, 35);

Рисуем изображение с точки с координатами 50, 35, что дает нам следующее изображение:

Screen-shot-2012-01-02-at-21.07.16

Продемонстрируем, что будет, если вначале повернуть систему координат:

context.rotate(0.5); 
context.drawImage(logoImage, 50, 35);

Screen-shot-2012-01-02-at-21.07.16Что же случилось? Правильно, вся система координат повернулась на 0.5 радиан (около 30º) вокруг левого верхнего края canvas прежде чем мы поместили изображение. Если вы хорошо подумаете, то поймете, что координата 50, 35 не обозначает то же место, что раньше (в первом примере).

То как же нам повернуть изображение, но при этом сохранить его в том же месте? Для этого перед вызовом rotate необходимо переместить начало canvas в место, где мы хотим поместить изображение вызовом метода context.translate(x,y):

context.translate(50, 35); 
context.drawImage(logoImage, 0, 0);

Метод translate полностью перемещает систему координат; context.translate(50, 35) перемещает начало координат в 50, 35. Поэтому если мы теперь отрисуем изображение в координатах 0, 0 - это будет в точности как в первом примере:

Screen-shot-2012-01-02-at-21.07.16

Запомните, что метод rotate вращает вокруг начала координат. Поэтому, если мы переместим начало координат в 50, 35, поворот будет вокруг этой точки:

context.translate(50, 35); 
context.rotate(0.5); 
context.drawImage(logoImage, 0, 0);

Screen-shot-2012-01-02-at-21.06.48

 



18.05.2019 93 Gor Abrahamyan -> web developer : views