javascript - 如何围绕中心旋转 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);

我对此尝试了数十种变体，并查看了有关该主题的每个 StackOverflow 帖子，没有任何函数可以绘制在其中心旋转一定量的图像。这就是我想要的。

Answer 1

您需要平移所需的中心加上图像大小的一半，旋转，然后平移回图像大小的一半。否则你就在拐 Angular 处旋转。我使用保存和恢复而不是在绘制后旋转和平移回来，因为这样更快。

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