如何圍繞中心旋轉HTML5畫布上的圖像

Question

這實際上是20個其他問題的精確重復，但是我在任何地方都找不到正確的答案。 我需要的是一種圍繞圖像中心旋轉圖像的方法。 我已經試過了（使用strokeRect作為占位符）：

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

我已經嘗試了數十種變體，並查看了該主題上的每個StackOverflow帖子，但沒有任何函數繪制在其中心旋轉一定量的圖像。 這就是我想要的。

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