Question

这实际上是20个其他问题的重复，但我在任何地方都找不到正确的答案。我需要的是一种围绕图像中心旋转图像的方法。我已经尝试过（使用strokeRect作为占位符）：

ctx.translate(x, y);
ctx.rotate(-angle);
ctx.strokeRect(x, y, 150, 100);
ctx.rotate(angle);
ctx.translate(-x, -y);

我对此进行了数十种尝试，并查看了该主题上的每个StackOverflow帖子，但没有任何功能可以绘制在其中心旋转一定量的图像。这就是我想要的。 / p>

Answer 1

您需要平移所需的中心，再加上图像尺寸的一半，旋转，然后再平移图像尺寸的一半。否则，您将在拐角处旋转。我使用的保存和恢复，而不是旋转和平移战平后回来，因为它的速度更快。

ctx.save();
ctx.translate(x + width/2, y + height/2);
ctx.rotate(-angle);
ctx.translate(-width/2, -height/2);
ctx.strokeRect(0, 0, 150, 100);
ctx.restore();

如何围绕中心旋转HTML5画布上的图像

1 个答案: