Поверните циферблат поверх полукруглого (северного полушария) изображения в качестве фона. диапазон может быть 0 - 180 градусов. на входе в метод, который делает преобразование холста, циферблат будет вращаться и останавливаться по согласованному значению. Здесь, что я пытался на основе справки и образца, переданного phrogz
Использование холста HTML5 - поворот изображения о произвольной точке
Ответ 1
В общем, что вы хотите сделать:
- Преобразование контекста в точку на холсте, вокруг которого должен вращаться объект.
- Поворот контекста.
- Преобразование контекста отрицательным смещением внутри объекта для центра вращения.
- Нарисуйте объект на 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 );
Использование преобразования контекста рекомендуется, когда у вас есть несколько объектов для рисования в одном и том же месте.