HTML5 's canvas clock (web effect-daily one more)

Today, a dynamic clock effect is implemented using the canvas tag in HTML5.

Words do not say much, first look at the effect: http://webfront.verynet.cc/pc/canvas-clock.html

As is known to all, the canvas label is the soul in HTML5, and HTML5 Canvas is an instant-mode bitmap area that is controlled by JavaScript on the screen. Instant mode refers to how pixels are rendered on the canvas,

HTML5 Canvas calls Canvasapi through JavaScript and completely redraws the bitmap on the screen at each frame. Details will be described in the code below.

HTML Structure Code:

1     <  ID= "Canvas"  width= " a" height= "$">  2         Your browser does not support Canavas tags, please upgrade your browser and view this page! 3     </ Canvas >

CSS style code:

1     <style type= "Text/css" >2        *{margin:0px;  Padding:0px;} 3         . Canvasbox{margin:50px auto;  Background:#dadada; width:500px;} 4     </style>

JS Script code:

1<script type= "Text/javascript" >2         varCanvas = document.getElementById ("Canvas");3         //Gets the 2d context object for the canvas4         varContext = Canvas.getcontext ("2d");5 6         //define an initialization function7         functioninit () {8             //clear all images on the canvas first9Context.clearrect (0,0,500,500);Ten  One             //Get system Time A             varDate =NewDate (); -             varHours =date.gethours (); -             //because clocks are 12-hour, they have to be controlled in time. theHours = hours > 12? Hours-12: Hours; -             varminutes =date.getminutes (); -             varseconds =date.getseconds (); -  +             //start drawing the Dial - Context.beginpath (); +             //draw a circle on the center of the canvas 250,250 points AContext.arc (250,250,200,0,360,false); at             //to define the width of a brush -Context.linewidth = 10; -             //Defining brush Colors -Context.strokestyle = "#000"; -             //Close Drawing Path - Context.closepath (); in             //Coloring - Context.stroke (); to  +             //start drawing a scale -             //moment degree the              for(varH = 0;h < 12;h++){ *                 //Save the image first $ Context.save ();Panax NotoginsengContext.linewidth = 8; -Context.strokestyle = "#f00"; the                 //Defining a rotation center point +Context.translate (250,250); A                 //defining the rotation angle theContext.rotate (h*30*math.pi/180); + Context.beginpath (); -Context.moveto (0,190); $Context.lineto (0,170); $ Context.closepath (); - Context.stroke (); -                 //The previous saved image is displayed to form a new image the Context.restore (); -             }Wuyi             //Sub-scale the              for(varm = 0;m < 60;m++){ - Context.save (); WuContext.linewidth = 4; -Context.strokestyle = "Red"; AboutContext.translate (250, 250); $Context.rotate (m*6*math.pi/180); - Context.beginpath (); -Context.moveto (0, 190); -Context.lineto (0, 180); A Context.closepath (); + Context.stroke (); the Context.restore (); -             } $  the             //Draw the hour hand the Context.save (); theContext.linewidth = 8; theContext.strokestyle = "#000"; -Context.translate (250,250); inContext.rotate (hours*30*math.pi/180); the Context.beginpath (); theContext.moveto (0,10); AboutContext.lineto (0,-100); the Context.closepath (); the Context.stroke (); the Context.restore (); +  -             //draw the minute hand the Context.save ();BayiContext.linewidth = 4; theContext.strokestyle = "#000"; theContext.translate (250,250); -Context.rotate (minutes*6*math.pi/180); - Context.beginpath (); theContext.moveto (0,10); theContext.lineto (0,-140); the Context.closepath (); the Context.stroke (); - Context.restore (); the  the             //Draw the second hand the Context.save ();94Context.linewidth = 2; theContext.strokestyle = "Blue"; theContext.translate (250,250); theContext.rotate (seconds*6*math.pi/180);98 Context.beginpath (); AboutContext.moveto (0,10); -Context.lineto (0,-170);101 Context.closepath ();102 Context.stroke ();103 Context.restore ();104         } the         //Call timer to redraw new images per second106SetInterval (init,1000);107</script>

Among them, there is a small bug. In the time of drawing and graduation, if the color is different, there will be overlapping phenomenon, because in the time of painting, then the painting of the scale, so the small series will be two scale color set to the same, to avoid the phenomenon. Of course, can also be judged to deal with, the small part is not dealt with here.

When you browse the effect, use a browser that supports HTML5 to avoid affecting your browsing effects.

Enjoy the code, enjoy life, web effects, daily one more.

HTML5 's canvas clock (web effect-daily one more)