Используя HTML5 Canvas - вращать изображение вокруг произвольной точки

Question

Поверните циферблат в верхней части полукруглого (северного полушария) изображения в качестве фона. диапазон может быть 0 - 180 градусов. при вводе в метод, который выполняет преобразование холста, циферблат будет вращаться и останавливаться над соответствующим значением. Вот то, что я пытался, основываясь на помощи и образце, переданном Phrogz

Answer 1

В общем, что вы хотите сделать, это:

1. Преобразуйте контекст в точку на холсте, вокруг которой должен вращаться объект.
2. Поверните контекст.
3. Преобразуйте контекст с помощью отрицательного смещения внутри объекта для центра вращения.
4. Нарисуйте объект в 0,0.

В коде:

ctx.save();
ctx.translate( canvasRotationCenterX, canvasRotationCenterY );
ctx.rotate( rotationAmountInRadians );
ctx.translate( -objectRotationCenterX, -objectRotationCenterY );
ctx.drawImage( myImageOrCanvas, 0, 0 );
ctx.restore();

Вот рабочий пример, демонстрирующий это в действии. (Математика для поворота была только экспериментально взломана, чтобы найти величину колебания и смещение в радианах, которые соответствуют быстро набросанной шкале датчика).

Как может быть очевидно, вы можете заменить translate вызов на шаге 3 выше со смещением к drawImage() вызов. Например:

ctx.drawImage( myImageOrCanvas, -objectRotationCenterX, -objectRotationCenterY );

Использование перевода контекста рекомендуется, когда у вас есть несколько объектов для рисования в одном месте.