Good day to all.
I need to create a graphical countdown in js. The algorithm for the timer is ordinary. But I need to create a circle filled with a color (lets say green, doesn't matter) and while the counter goes down the circle gets fill with another color. So what I basically need to do is fill a circle with color.
First I thought to simulate some lines inside the circle (from center to margin) and fill it with them. The problem is how to generate lines... and I got to the conclusion that I should generate points to generate lines to fill the circle and even though the code is easy to write sounds like quite a resource eater.
Second option would be to use a drawing library but I fear that it would do the same thing.
So... any ideas how to implement this without wasting too much resources?
Note: The circle must be fill in a circular way... like skill reuse in games for example. (like a clock)
The best way I can think of is to use the Raphael graphis library which allows your code to draw SVG (or VML on older IE). Look at the source of this demo (which basically does what you want):
http://raphaeljs.com/polar-clock.html
The key to understanding the code is understanding this line:
path = [["M", 300, 300 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
And the key to understanding that line is to first understand SVG path specification: