This is what we are going to create:
And as you can see from the source code there isn’t any image or CSS style as the clock is fully made with vectors.
let's explore it in detail:
Line 6: loading Raphaël library
Line 10: creation of a canvas object called
canvas on which we will draw the clock. The parameters are the id of the container (
clock_id, you can find it at line 48), the width and the height of the object, in pixels
Line 11: drawing a circle called
clock with center at 100,100 with a 95 pixels radius.
Line 12: setting some attributes for
clock (the circle):
fill":"#f5f5f5" will fill the circle with that color ,
"stroke":"#444444" will decide the stroke color and
"stroke-width":"5" is the width, in pixels, of the stroke.
Line 13: creating a variable called
hour_sign that we'll use to draw the hours.
Lines 14-20: the
for loop goes through all 12 hours representable in a clock, uses trigonometry to find the starting and ending point of each hour sign, then uses path method to create a path element according to the string passed as argument which represents the path in SVG format. For more information about this format, check the official SVG docs. Anyway, it's a very easy format since it follows the "move and line" theory, just like AS3.
If we look at line 21, which draws the hour hand
it can be translated into AS3 this way:
We keep drawing clock parts until line 29, using the same methods.
At line 30 we call
update_clockfunction which will place all hands in the correct position according to your computer's time, then at line 31 we make such function being executed at every second.
update_clockjust determines current hours, minutes and seconds and updates the hands using
rotatemethod which wants as arguments the amount of degrees to rotate the object and the center of rotation.
The degrees are determined by dividing 360 by the number of possible values (60 for seconds and minutes, 12 for hours) then multiplying such value by the current hours/minutes/seconds.
Hour hand is also rotated a bit more as minutes pass by, just like in real clocks.
Just notice the perfect code for the hour hand would be
2will make hour hand rotate slower and will give a better visual effect.