如何围绕中心 HTML5 canvas 旋转图像

Question

这实际上与其他 20 个问题完全相同，但我无法在任何地方找到正确答案。我所需要的只是一种围绕其中心旋转图像的方法。我试过这个（使用 strokeRect 作为占位符）：

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

我已经尝试了数十种变体，并查看了关于该主题的每个 Whosebug post，没有绘制图像的函数 在其中心旋转一定量。 这就是我想要的。

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 canvas 旋转图像

How to rotate an image on an HTML5 canvas around center

javascript

rotation

html5-canvas