JavaScript Canvas : Continuously rotating a canvas drawn image

Question

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

我将如何连续旋转 Canvas 上绘制的图像？

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

如有任何建议，我们将不胜感激。

Answer 1

动画和旋转图像

动画

要使用 Canvas 对任何内容进行动画处理，您需要首先设置动画循环。通常，您使用一个动画循环来渲染所有 Canvas 内容。

动画的时间由使用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 覆盖现有的转换，因此您无需担心 Canvas 状态

要绕图像中心旋转，您需要将图像偏移其宽度和高度的一半，否则它将绕左上角旋转。

旋转图像的示例函数

 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
}

把它们放在一起

下一个示例加载图像，设置 Canvas 并使用主循环旋转图像。注意，由于加载的图像不适合，我在图像绘制函数中添加了比例。

const img = new Image();
img.src = "/image/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>

许多图例将使用保存和恢复，并通过一组平移和旋转来旋转图像。与使用 setTransform 相比，这非常慢。尽量避免使用太多转换调用和调用 save和 restore .

这个answer shows 500 images使用相同的方法旋转和缩放图像。如果您使用的设备不是慢速设备，则还有足够的空间可以增加计数。一般笔记本电脑和台式机在全帧速率下的帧数会超过 1000。