我在 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?
最佳答案
Canvas 总是 围绕原点 (0,0) 旋转。 ctx.translate
命令可以被认为是移动原点,所以你必须在旋转之前通过 (x+w/2, y+h/2)
进行平移,如果您希望围绕矩形的中心旋转。
(当然,之后翻译回去,或者使用save
和restore
)
关于javascript - Canvas 旋转对象关于动态点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14033365/