These days i have been learning HTML5 canvas ,and  i wrote this clock .

 

           In this clock ,i use some basic function of canvas :arc(),fill() stroke() moveTo(), lineTo(), fillText(), clearRect(), translate(), and so on .

 

           Though i finishing the clock ,i know it is  not efficient .Every second ,i clear the clock and draw again ,it may pretty waste the CPU.Now i havent find out a good way ,please forgive me as a freshman in canvas ,but later ,when learn more ,i think there must be some good ways to solve it .

 

           Now ,here is the demo :    the code edit 

 

           Here ,i'm glad to share my code for everyone .Later，i'll show the code step by step .

 

<a class="jsbin-embed" href="http://jsbin.com/welcome/41824/embed?live"></a><script src="http://static.jsbin.com/js/embed.js"></script>