htmlキャンバスで独立して2つの画像を回転させる方法

Question

HTMLキャンバスを使用してギアのセットを表示します。私は次のようなものを持っていますhttp://jsfiddle.net/jeepstone/RpmuE/しかし、固定されて回転しているのではなく、小さな歯車が大きな歯を中心に回転します。私はそれが固定されたら、私は歯車の相対的な速度を動作させることができますが、私はそれが主な歯車の周りを動く理由を理解できません。

アイデア？

Answer 1

Demo

ほらクールなアイデアは、私が問題の原因だと思う主なものは、行方不明restoreました。覚えておくべきことは、回転の前に翻訳をしたいということです。それ以外の場合は、canvasを翻訳し、canvas全体を回転させ、コンテキスト上のすべてを回転します。

Answer 2

ああ。それは理にかなっている。ギアボックスを持って来なさい！