画布关于动态点的旋转对象

时间:2012-12-25 19:18:56

标签: javascript html rotation html5-canvas

我在画布上的特定x,y,w,h处有一个圆角矩形。我首先做一个context.translate来获取我想要它的对象,然后当它转动它时,这就是我在解决所需的数学问题。

我可以做一个简单的context.rotate(Math.PI / 180 * 25)来旋转它25度但它从x,y旋转。我真的想把旋转点转移到x +(w / 2)和y +(w / 2)。

我不知道如何告诉旋转方法将其旋转到不同的点。我想我必须像正常情况一样旋转它,但是重新计算x,y可能也可能基于旋转?

1 个答案:

答案 0 :(得分:0)

画布始终围绕原点(0,0)旋转。可以将ctx.translate命令视为移动原点,因此如果您希望围绕矩形的中心旋转,则必须在旋转之前翻译(x+w/2, y+h/2)

(当然,之后翻译,或使用saverestore