I want to create a circle that is sectioned into 4 quarters, and each quarter is then sub-divided into segments. Each quarter will have a different background colour (or background image).
The circle will serve as a countdown timer, where each segment will last around 5 seconds (see attached image for idea of what I’m looking for). The timer will only start when a javascript command has been issued (it should also be possible to pause, and rewind the timer).
The transition between the segments does not have to be a smooth animation (i.e. transitioning to a segment can simply involve the previous segment background colour turning white)
There are a few caveats:
– The number of segments in each quadrant can change, so the size of each segment has to be flexible
– The order of quadrants can change (i.e. instead of blue, orange, red, green… we could have orange, red, purple, etc etc)
– It has to work on iPhone and existing Android phones (I was looking at Raphael and SVG, but this doesn’t seem to be supported on Android.)
I’m at a loss at how best to tackle this problem, so would be grateful to hear suggestions or even see examples (although I haven’t been able to source any)
I think the best way of achieving the result you want is to use a canvas element and draw on it by using javascript or to use animated images along with static images and a little JS to switch between the two types.