javascript - Canvas 旋转对象关于动态点

Question

我在 Canvas 上的特定 x、y、w、h 处有一个圆 Angular 矩形。我首先执行 context.translate 以将对象放在我想要的位置，然后在旋转它时，这是我在计算所需的数学时遇到问题的地方。

我可以做一个简单的 context.rotate(Math.PI/180 * 25) 将它旋转 25 度，但它从 x,y 旋转。我真的很想将旋转点移动到像 x + (w/2) 和 y + (w/2) 这样的位置。

我不确定如何告诉 rotate 方法让它围绕不同的点旋转。我想我必须像往常一样旋转它，但也许可以根据旋转重新计算 x,y？

Answer 1

Canvas 总是 围绕原点 (0,0) 旋转。 ctx.translate 命令可以被认为是移动原点，所以你必须在旋转之前通过 (x+w/2, y+h/2) 进行平移，如果您希望围绕矩形的中心旋转。

(当然，之后翻译回去，或者使用save 和restore)