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

Question

[vladislavstarkov]

Как правильно применять 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();

}

Comments

[bobry]

code sample в студию, надеюсь вы в курсе что 0.05 радиан это не 60°

[vladislavstarkov]

0.05 для примера, абсолютно не привязывал к 60 градусам

Answer 1

[Павло Пономаренко]

В топике, что вам дали выше есть целый абзац про это:

Если мы хотим вращать какой-то объект, например, картинку, необходимо правильно взаимодействовать методами 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);

Comments

[Павло Пономаренко]

Последний пример — без LibCanvas

Answer 2

[Павло Пономаренко]

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

Оно крутится вокруг точки 0:0

Answer 3

[nikitammf]

Один из вариантов есть в "Canvas-трансформации доступным языком"

Comments

[vladislavstarkov]

Внутри кликаем на ссылку libcanvas.com/transform/rotate.html и получаем 404 Not Found.

[Павло Пономаренко]

Скоро восстановлю.
Тем не менее, код в топике — есть.

Answer 4

[Макс Кузнецов]

Что значит съезжает? До поворота все как надо отображает?
Угол, от которого rotate() делаете, так считаете: 60 градусов = Math.PI / 3?

Comments

[Макс Кузнецов]

Возможно ещё, перед поворотом нужно указывать точку, вокруг которой будем вращать, с помощью .translate(x,y);

[vladislavstarkov]

Можете показать рабочий пример с arc и rotate?

Answer 5

[Keyten]

И ещё. Функция rotate принимает угол в радианах, для градусов юзайте deg / 180 * Math.PI.

Comments

[Keyten]

Сорри, выше уже всё сказано)