html 캔버스에서 독립적으로 2 개의 이미지를 회전하는 방법

Question

HTML 캔버스를 사용하여 일련의 기어를 보여주고 싶습니다. 나는 다음과 같은 것을 가지고있다 http://jsfiddle.net/jeepstone/RpmuE/ 그러나 작은 톱니 바퀴는 고정되어 있고 단지 회전하고있는 것보다 큰 톱니 바퀴 주위를 돌아 다닌다. 일단 고정 시키면 톱니 바퀴의 상대적 속도를 알아낼 수는 있지만 주 톱니 바퀴 주위를 움직이는 이유는 해결할 수 없습니다.

아이디어가 있으십니까?

Answer 1

Demo

하 석 멋진 아이디어는 내가 문제를 일으키는 생각 중요한 것은 누락 된 restore이었다. 기억할 것은 회전하기 전에 번역을하고 싶다는 것입니다. 그렇지 않으면 canvas을 번역 한 다음 전체 canvas을 회전하여 컨텍스트에서 모든 것을 회전시킵니다.

Answer 2

아 좋아요. 그건 의미가 있습니다. 기어 박스를 가져 오십시오!