画布 - 旋转我的图像（圆圈）

Question

我目前有一堆圆圈，我用一个“盒子”内的图像填充它们，它们正在弹跳和碰撞。现在我想让它们旋转。 我试图让它工作，但我似乎只能旋转整个画布，我只希望球旋转。

这是我的渲染函数：

  var img = new Image;
  img.onload = function() {
  render();
  console.log("asdsad");
  }

  img.src = "xxx.png";

  function render() {
  var ball;
  for (var i = 0; i <balls.length; i++) {
     ball = balls[i];
     ball.x = ball.nextx;
     ball.y = ball.nexty;
     context.drawImage(img, ball.x - (img.width/2), ball.y - (img.height/2));     
  }

}

目标：让这些球旋转。

编辑：我尝试过这样的事情，显然我做错了什么。

     context.rotate(Math.PI/180); // Should this be another value? Either way, entire canvas rotates.
     context.drawImage(img, ball.x - (img.width/2), ball.y - (img.height/2));
     //context.rotate(-Math.PI/180)
     context.restore();

Answer 1

你说你试过了：

context.rotate(Math.PI/180);

正如数学中已知的 PI = 180 度，如果你做 PI / 180 = 1 度，它只会做一点点。
所以如果你想将画布旋转 90 度，你必须写：

context.rotate(Math.PI/2);

如果你想要 180 度，你必须：

context.rotate(Math.PI);

然后继续。
通过一些计算，您将能够将其旋转到您想要的任何角度。

如果这不起作用，你可以试试这个替代方法

此函数接受参数并以简单的方式为您构建图像，您可以理解它可能会帮助某人解决他们的问题。 这个功能帮助你

function drawImg(img, pX, pY, oX, oY, w, h, rot , context2D) {
context2D.save();
context2D.translate(pX+oX, pY+oY);
context2D.rotate(rot * Math.PI / 180);
context2D.drawImage(img, 0, 0, w, h, -(oX), -(oY), w, h);
context2D.restore();
}

总结：

img: the image object
pX: the x position of the image
pY: the y position of the image
oX: how far across the image that the origin is
oY: how far down the image that the origin is
w: width of the image
h: height of the image
rot: angle of rotation
context2D: the context that have been build from the canvas

Answer 2

您的代码就快到了。您只是忘记了实际角度：

如果你想要一些容易包裹头部的东西并以度为单位使用角度，你可以这样做：

context.rotate(angle * Math.PI / 180);

这里的一个技巧是预先计算 Math.PI / 180 并使用它来计算：

var deg2rad = Math.PI / 180;
...
context.rotate(angle * deg2rad);

然后画球。

您可能已经知道，但以防万一（因为它不在您提供的示例中）- 要使用 restore，您必须首先使用 save：

context.save();
context.rotate(angle * Math.PI / 180);
context.drawImage(img, ball.x - (img.width * 0.5), ball.y - (img.height * 0.5));
context.restore();

更新：

我用一个球做了一个例子。只需将原理应用于许多人即可。

ONLINE DEMO HERE

主循环是这样的：

/// pre-setup done (see demo)

function loop() {

    /// change direction if at some edge    
    if (x < r || x > ez.width - r) {
        dx = -dx;
        angleDelta = -angleDelta; /// dummy bounce
    }
    if (y < r || y > ez.height - r) {
        dy = -dy;
    }

    /// clear previous ball
    ctx.clearRect(x - r - 2, y - r - 2, img.width + 4, img.height + 4);

    /// move and rotate
    x += dx;
    y += dy;
    angle += angleDelta;

    /// save context
    ctx.save();

    /// move to ball's center position
    ctx.translate(x, y);

    /// rotate at balls center position
    ctx.rotate(angle);

    /// draw ball offset so center is center of image
    ctx.drawImage(img, -r, -r);

    /// reset translation and rotation
    ctx.restore();

    ///again
    requestAnimationFrame(loop);
}