использование canvasа HTML5 – поворот изображения о произвольной точке

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

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

  1. Преобразуйте контекст в точку на canvasе, вокруг которой должен вращаться объект.
  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 ); 

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

Давайте будем гением компьютера.