vladislavstarkov
@vladislavstarkov

Как использовать rotate в canvas HTML5?

Как правильно применять JS метод rotate для элемента canvas в HTML5?


Если я просто делаю context.rotate(0.05) то изображение начинает съезжать по какойто странной траектории.


Задача простая: повернуть вокруг своей оси на 60 градусов объект canvas.


Приведите пример.


UPD: Что в этом коде не так?


function html5(){

// экспериминирую с canvas HTML5

ctx.beginPath()

ctx.arc(110, 113, 105, 0, Math.PI);

ctx.lineWidth = 10;

ctx.strokeStyle = '#000';

ctx.rotate(2); // < — переаворачиваем, тут явно нужно что-то еще добавить…

ctx.stroke();

ctx.closePath();

}
  • Вопрос задан
  • 15355 просмотров
Пригласить эксперта
Ответы на вопрос 5
В топике, что вам дали выше есть целый абзац про это:
Если мы хотим вращать какой-то объект, например, картинку, необходимо правильно взаимодействовать методами rotate и translate, иначе мы никогда не попадём картинкой в нужное место. Самый простой способ осью вращения выбрать центр картинки и отрисовывать её в координаты (-width/2, -height/2). К примеру, мы хотим развернуть картинку размерами 50х50, находящуюся на координатах 100:100. Указываем translate в координату 125:125 и отрисовываем картинку в координату -25:-25. Альтернатива — использовать LibCanvas и метод rotatedImage(или drawImage в ближайшем будущем) и не напрягаться.


При помощи LibCanvas, который можно скачать с GitHub это будет выглядеть как-то так:
canvas
  .getContext('2d-libcanvas')
  .drawImage({
      image: yourCanvas,
      from : [15, 40],
      angle: (60).degree()
  });


Если использовать расширение Number.prototype.degree из топика, то ваш код может выглядеть так:
function rotatedDrawImage (ctx, image, fromX, fromY, angle) {
    ctx.save();
    ctx.translate(fromX + image.width / 2, fromY + image.height / 2);
    ctx.rotate(angle.degree());
    ctx.translate(-(fromX + image.width / 2), -(fromY + image.height / 2));
    ctx.drawImage(image, fromX, fromY);
    ctx.restore();
}
rotatedDrawImage(canvas.getContext('2d'), yourCanvas, 15, 40, 60);
Ответ написан
Если я просто делаю context.rotate(0.05) то изображение начинает съезжать по какойто странной траектории.

Оно крутится вокруг точки 0:0
Ответ написан
Комментировать
Что значит съезжает? До поворота все как надо отображает?
Угол, от которого rotate() делаете, так считаете: 60 градусов = Math.PI / 3?
Ответ написан
Keyten
@Keyten
И ещё. Функция rotate принимает угол в радианах, для градусов юзайте deg / 180 * Math.PI.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы