Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.04.2013, 17:20
Кандидат Javascript-наук
Отправить личное сообщение для Valdemor Посмотреть профиль Найти все сообщения от Valdemor
 
Регистрация: 30.03.2012
Сообщений: 128

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();

Но при этом изображение появляется в координатах, которые являються инверсией текущих координат изображения (если центром координат брать за центр экрана).
Как сделать так, чтобы изображение оставалось на месте, но при этом поворачивалось?
Ответить с цитированием
  #2 (permalink)  
Старый 29.04.2013, 18:00
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Valdemor
Как сделать так, чтобы изображение оставалось на месте, но при этом поворачивалось?
Нужно ctx.translate в центр изображения
ctx.save();
ctx.translate(....);
ctx.rotate(angle*Math.PI/180);
/* рисуем изображение */
ctx.restore();

Последний раз редактировалось vadim5june, 29.04.2013 в 18:07.
Ответить с цитированием
  #3 (permalink)  
Старый 29.04.2013, 18:07
Кандидат Javascript-наук
Отправить личное сообщение для Valdemor Посмотреть профиль Найти все сообщения от Valdemor
 
Регистрация: 30.03.2012
Сообщений: 128

ctx.translate(canvas.width/2,canvas.height/2);
А это что?
Ответить с цитированием
  #4 (permalink)  
Старый 29.04.2013, 18:12
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Valdemor Посмотреть сообщение
ctx.translate(canvas.width/2,canvas.height/2);
А это что?
это центр канваса
Какой командой рисуете?
Если drawImage то надо оттуда координаты посчитать
Я имел ввиду что-то типа вот этого
canvas rotate center

Последний раз редактировалось vadim5june, 29.04.2013 в 18:57.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
html5. Canvas Valdemor (X)HTML/CSS 2 25.08.2012 00:26
html5, Canvas, KineticJS, cvg, google chrome N3K Библиотеки/Тулкиты/Фреймворки 0 20.07.2012 12:43
Canvas html5 Иваннн Оффтопик 9 16.01.2012 00:41
Поворот изображения на Canvas Severtain Общие вопросы Javascript 16 07.07.2011 19:19
Поворот изображения в браузере Владимир Седов Элементы интерфейса 1 15.03.2011 00:10