JavaScript Canvas: непрерывное вращение нарисованного изображения на холсте - PullRequest
Новая
       51

JavaScript Canvas: непрерывное вращение нарисованного изображения на холсте

0 голосов
/ 26 апреля 2018

Я пытаюсь вращать спрайт, сохраняя ту же позицию.

Как бы я мог непрерывно вращать это изображение, нарисованное на холсте?

Мое предположение было бы вызывать функцию, используя setInterval каждые 300 мс, например, но я понятия не имею, как непрерывно вращать одиночный элемент на холсте.

Любые предложения приветствуются.

1 Ответ

0 голосов
/ 27 апреля 2018

Анимация и вращающееся изображение

Анимация

Чтобы анимировать любой контент, используя холст, вам нужно сначала настроить цикл анимации. Обычно вы используете один цикл анимации для визуализации всего содержимого холста.

Время анимации контролируется событиями времени, созданными с использованием requestAnimationFrame(callback) (RAF). Это автоматически вызывает следующий кадр через 1/60 секунды (если это возможно). Вам нужно вызвать RAF в какой-то момент цикла анимации.

Пример цикла анимации. 

 function mainLoop(time) { // time is automatically passed to the function
      ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas

      // draw what you need for the animation

      requestAnimationFrame(mainLoop); // set up the next frame
 }

 // to start the animation call RAF 
 requestAnimationFrame(mainLoop); // set up the next frame

Поворот изображения.

Вы можете вращать изображение вокруг его центра, используя 2D-контекстные функции setTransform и rotate.

setTransform перезаписать существующее преобразование, поэтому вам не нужно беспокоиться о состоянии холста

Чтобы повернуть центр изображения, вам нужно нарисовать смещение на половину его высоты и высоты, иначе оно будет вращаться вокруг верхнего левого угла.

Пример функции поворота изображения 

 function drawImageRotated(img, x, y, rot){
      ctx.setTransform(1, 0, 0, 1, x, y); // set the scale and the center pos
      ctx.rotate(rot); // set the rotation
      ctx.drawImage(img, -img.width /2, -img.height /2); // draw image offset 
                                                         // by half its width
                                                         // and heigth
      ctx.setTransform(1, 0, 0, 1, 0, 0); // restore default transform
}

Соберите все вместе

Следующий пример загружает изображение, устанавливает холст и с помощью основного цикла поворачивает изображение. Примечание. Я добавил масштаб к функции рисования изображений, поскольку загруженное изображение не помещалось. 

const img = new Image();
img.src = "https://i.stack.imgur.com/C7qq2.png?s=328&g=1";
img.onload = () => { requestAnimationFrame(mainLoop) } // start when loaded
const ctx = canvas.getContext("2d"); 

function drawImageRotated(img, x, y, scale, rot) {
  ctx.setTransform(scale, 0, 0, scale, x, y);
  ctx.rotate(rot);
  ctx.drawImage(img, -img.width / 2, -img.height / 2);
  ctx.setTransform(1, 0, 0, 1, 0, 0);
}

function mainLoop(time) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawImageRotated(img,canvas.width / 2, canvas.height / 2, 0.5, time / 500);
  requestAnimationFrame(mainLoop);
}
<canvas id="canvas" width="200" height="200"></canvas>

Многие туты будут использовать save и restore и поворачивать изображение с помощью набора переводов и поворотов. Это очень медленно по сравнению с использованием setTransform. Старайтесь не использовать слишком много вызовов преобразования и вызовов save и restore.

Этот ответ показывает 500 изображений повернутых и масштабированных изображений, используя тот же метод. Существует много места для подсчета, если вы не используете медленное устройство. Средние ноутбуки и десктопы будут работать более 1000 при полной частоте кадров.

...