Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   HTML5 Canvas. Поворот изображения (https://javascript.ru/forum/dom-window/37653-html5-canvas-povorot-izobrazheniya.html)

Valdemor 29.04.2013 17:20

HTML5 Canvas. Поворот изображения
 
Поворот изображения в html5 canvas происходит следующим образом:
ctx.save();
ctx.translate(canvas.width/2,canvas.height/2);
ctx.rotate(angle*Math.PI/180);
ctx.translate(-canvas.width/2,-canvas.height/2);
/* рисуем изображение */
ctx.restore();

Но при этом изображение появляется в координатах, которые являються инверсией текущих координат изображения (если центром координат брать за центр экрана).
Как сделать так, чтобы изображение оставалось на месте, но при этом поворачивалось?

vadim5june 29.04.2013 18:00

Цитата:

Сообщение от Valdemor
Как сделать так, чтобы изображение оставалось на месте, но при этом поворачивалось?

Нужно ctx.translate в центр изображения
ctx.save();
ctx.translate(....);
ctx.rotate(angle*Math.PI/180);
/* рисуем изображение */
ctx.restore();

Valdemor 29.04.2013 18:07

ctx.translate(canvas.width/2,canvas.height/2);
А это что?

vadim5june 29.04.2013 18:12

Цитата:

Сообщение от Valdemor (Сообщение 248486)
ctx.translate(canvas.width/2,canvas.height/2);
А это что?

это центр канваса
Какой командой рисуете?
Если drawImage то надо оттуда координаты посчитать
Я имел ввиду что-то типа вот этого
http://javascript.ru/forum/project/1...tml#post176182


Часовой пояс GMT +3, время: 03:41.