JavaScript Canvas: 连续旋转一个canvas绘制的图像

Question

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

我将如何连续旋转绘制在 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 and 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 = "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>

许多 tuts 将使用 save 和 restore，并通过一组平移和旋转来旋转图像。与使用 setTransform 相比，这非常慢。尽量避免使用过多的转换调用和对 save and restore.

的调用

此 answer shows 500 images 使用相同的方法旋转和缩放图像。如果您使用的不是慢速设备，则有足够的空间来增加计数。普通笔记本电脑和台式机在全帧率下可以达到 1000+。

JavaScript Canvas: 连续旋转一个canvas绘制的图像

JavaScript Canvas: Continuously rotating a canvas drawn image

javascript

animation

canvas

html5-canvas

image-rotation

动画和旋转图像

动画

旋转图像。

把它们放在一起