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

标签 javascript html rotation html5-canvas

我在 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) 进行平移,如果您希望围绕矩形的中心旋转。

(当然,之后翻译回去,或者使用saverestore)

关于javascript - Canvas 旋转对象关于动态点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14033365/

相关文章:

python - 在 NetworkX 中显示节点位于精确 (x,y) 位置的图形。结果被轮换

javascript - Raphael element.animate(...) - 指定在动画的每一步执行的回调

javascript - 如何使用 javascript 从另一个文件设置元素的 innerHTML?

javascript - 在 div 中将文本左对齐并垂直居中

Emacs 中的 HTML 标签未对齐

php - 在多列中显示列表项并限制行数

android - 在 Android 中将 "USER_ROTATION"用于低于 11 的 API(解决方法?)

javascript - Sails.js IO.socket 未触发

javascript - 如何通过动态属性名称获取数组中的所有元素?

javascript - 用jQuery旋转,记住位置