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();

balls

Answer 1

您的代码几乎就在那里。你只是忘记了实际的角度：

如果你想要一些容易缠绕头部并使用度数角度的东西，你可以这样做：

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);
}

Answer 2

你说你试过了：

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

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

2 个答案: