如何在 html 画布上独立旋转 2 个图像
我想使用 HTML 画布显示一组齿轮。我有以下 http://jsfiddle.net/jeepstone/RpmuE/ 但小齿轮围绕大齿轮旋转,而不是保持固定并只是旋转。一旦我把它修好,我就可以计算出齿轮的相对速度,但我无法弄清楚为什么它围绕主齿轮移动。
有什么想法吗?
I want to show a set of gears using HTML canvas. I've got the following http://jsfiddle.net/jeepstone/RpmuE/ but the little cog rotates around the big cog rather than staying fixed and just rotating. Once I have it fixed I can work out the relative speeds of the cogs but I can't work out why it moves around the main cog.
Any ideas?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
演示
哈,很酷的想法,我认为导致问题的主要原因是缺少
恢复
。要记住的一件事是您要在旋转之前进行翻译。否则,您将平移canvas
,然后旋转整个canvas
,从而旋转上下文中的所有内容。Demo
Hah cool idea, the main thing I think causing the issue was a missing
restore
. A thing to remember is you want to do your translates before the rotations. Otherwise you will translate thecanvas
, and then rotate the wholecanvas
thus rotating everything on the context.啊好吧。这是有道理的。装上变速箱!
Ah ok. That makes sense. Bring on the gearbox!