Html5 clock animation-html5 tutorial tips-

This article describes how to draw a clock animation in html5. For more information, see

The Code is as follows:

Var clock = document. getElementById ("clock ");
Var cxt = clock. getContext ("2d ");
Function drawNow (){
Var now = new Date ();
Var hour = now. getHours ();
Var min = now. getMinutes ();
Var sec = now. getSeconds ();
Hour = hour> 12? Hour-12: hour;
Hour = hour + min/60;
// Dial (blue)
Cxt. lineWidth = 10;
Cxt. strokeStyle = "blue"
Cxt. beginPath ();
Cxt. arc (250,250,200, 0,360, false );
Cxt. closePath ();
Cxt. stroke ();
// Scale
// Time
For (var I = 0; I <12; I ++ ){
Cxt. save ();
Cxt. lineWidth = 7;
Cxt. strokeStyle = "black ";
Cxt. translate (250,250 );
Cxt. rotate (I * 30 * Math. PI/180); // Rotation Angle * Math. PI/180 = radian
Cxt. beginPath ();
Cxt. moveTo (0,-170 );
Cxt. lineTo (0,-190 );
Cxt. closePath ();
Cxt. stroke ();
Cxt. restore ();
}
// Scale
For (var I = 0; I <60; I ++ ){
Cxt. save ();
// Set the width of the score.
Cxt. lineWidth = 5;
// Reset the canvas Origin
Cxt. translate (250,250 );
// Set the Rotation Angle
Cxt. rotate (I * 6 * Math. PI/180 );
// Draw the scale of the sub-needle
Cxt. strokeStyle = "black ";
Cxt. beginPath ();
Cxt. moveTo (0,-180 );
Cxt. lineTo (0,-190 );
Cxt. closePath ();
Cxt. stroke ();
Cxt. restore ();
}
// Hour
Cxt. save ();
// Set the hour-hand style
Cxt. lineWidth = 7;
Cxt. strokeStyle = "black ";
Cxt. translate (250,250 );
Cxt. rotate (hour * 30 * Math. PI/180 );
Cxt. beginPath ();
Cxt. moveTo (0,-140 );
Cxt. lineTo (0, 10 );
Cxt. closePath ();
Cxt. stroke ();
Cxt. restore ();
// Split the needle
Cxt. save ();
Cxt. lineWidth = 5;
Cxt. strokeStyle = "black ";
// Set the center of the needle distribution canvas of a Multi-Dimensional Space
Cxt. translate (250,250 );
Cxt. rotate (min * 6 * Math. PI/180 );
Cxt. beginPath ();
Cxt. moveTo (0,-160 );
Cxt. lineTo (0, 15 );
Cxt. closePath ();
Cxt. stroke ()
Cxt. restore ();
// Seconds
Cxt. save ();
// Set the second-hand style
// Color: red
Cxt. strokeStyle = "red ";
Cxt. lineWidth = 3;
// Reset the origin
Cxt. translate (250,250 );
// Set the angle
// Cxt. rotate (330 * Math. PI/180 );
Cxt. rotate (sec * 6 * Math. PI/180 );
Cxt. beginPath ();
Cxt. moveTo (0,-170 );
Cxt. lineTo (0, 20 );
Cxt. closePath ();
Cxt. stroke ();
// Draw the intersection of the hour, minute, and second hands
Cxt. beginPath ();
Cxt. arc (0, 0, 5, 0, 360, false );
Cxt. closePath ();
// Set Filling
Cxt. fillStyle = "gray ";
Cxt. fill ();
// Cxt. strokeStyle = "red ";
Cxt. stroke ();
// Draw a small dot in seconds
Cxt. beginPath ();
Cxt. arc (0,-140,5, 0,360, false );
Cxt. closePath ();
// Set Filling
Cxt. fillStyle = "gray ";
Cxt. fill ();
// Cxt. strokeStyle = "red ";
Cxt. stroke ();

Cxt. restore ();

}
Function drawClock (){
Cxt. clearRect (0, 0, 500,500 );
DrawNow ();
}
DrawNow ();
SetInterval (drawClock, 1000 );