JavaScript Canvas：连续旋转画布绘制的图像

Question

我正在尝试旋转精灵，同时保持相同的位置。

我如何继续持续旋转画布上绘制的图像？

我的假设是每隔300毫秒调用一个使用setInterval的函数，但我不知道如何在画布上连续旋转单个元素。

任何建议都表示赞赏。

Answer 1

动画和旋转图像

动画

要使用画布为任何内容设置动画，首先需要设置动画循环。通常，您使用一个动画循环来渲染所有画布内容。

动画的时间由使用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。

这个answer shows 500 images使用相同的方法旋转和缩放图像。如果您不使用慢速设备，则有足够的空间来计算。平均笔记本电脑和台式机将以全帧速率完成1000+。