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

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

35 голосов
/ 10 января 2011

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

1 Ответ

89 голосов
/ 10 января 2011

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

  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 );

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

...