<! DOCTYPE HTML> <HTML lang = "EN"> <head> <Meta charset = "UTF-. 8"> <title> Clock drawing the Canvas Demo </ title> <style> #myCanvas { border: 1px Solid; } < / style> </ head> <body> <canvas the above mentioned id = "myCanvas" width = "500" height = "400"> Sorry, your browser does not support the canvas element </ canvas> <Script> var c = the Document .getElementById ( 'myCanvas'); // Get the Canvas var CTX = c.getContext ( '2D');// Get context function drawClock () { ctx.clearRect ( 0,0, c.width, c.height); // clear the canvas coordinate y coordinates of the rectangle length x width of the rectangle c.width = c.width; // needs to be reset when the clear width of the canvas, or there will be a canvas overlap var x = 250, y = 200 is, = 180 [R & lt; // radius and center coordinates of the disc definition of disk / * get the actual time * / var objTime = new new a Date (); var objHour = objTime.getHours (); var objMin = objTime.getMinutes (); var objSen = objTime.getSeconds (); / * converting radians specific time * / / * * since the clock is counted from a start position of 12 o'clock, but the canvas is counted as 3 o'clock position 0 degrees, -90 degrees to point 12:00 direction * clockwise 30 degrees per hour apart, objMin / 2 in order to make more than half when the minute hand, the hour hand is between a corresponding two hours * per minute and second hands are separated by 6 degrees * / var= arcHour (+ -90 * 30 + objMin objHour / 2) * Math.PI / 180 [ ; var arcmin = (-90 + objMin *. 6) * Math.PI / 180 [; var arcSen = (-90 + objSen *. 6) Math.PI * / 180 [; / * draw disc * / ctx.beginPath (); // start the path for ( var I = 0; I <60; I ++) // a total of 360 degrees, a total of 60 minutes per minute apart 6 degrees, 360/6 = 60 { ctx.moveTo (X, Y); // start point coordinates ctx.arc (x, y, r, 6 * i * Math.PI / 180,6 * (i + 1) * Math.PI / 180 [, to false); // draw a circle } ctx.closePath (); // a closed path ctx.stroke (); / * Draw white plate covering the lower line * / ctx.fillStyle = 'White' ; ctx.beginPath (); CTX .arc (X, Y, r *. 19 / 20,0,360 Math.PI * / 180 [, to false ); // a radius of r value of 20 19 parts per ctx.closePath (); ctx.fill (); / * Yihuhuhuapiao, every hour production line * / / * draw disc * / ctx.beginPath (); ctx.lineWidth =. 3 ; for ( var I = 0; I <12; I ++) // a total of 360 degrees, a total of 12 hours apart, 30 degrees per hour, 360/30 = 12 { ctx.moveTo (X, Y); ctx.arc (X, Y, R & lt, 30 Math.PI * I * / 180,30 * (I +. 1) Math.PI * / 180 [, to false ); } ctx.closePath (); ctx.stroke (); / * plotted below the white plate cover line * / ctx.fillStyle = 'White' ; ctx.beginPath (); ctx.arc (X, Y, r * 18 is / 20,0,360 Math.PI * / 180 [, to false ); // a radius value of r 20 Fenzhi 18 ctx.closePath (); ctx.fill (); / * start drawing the hour and minute hands and the second hand, trick is to start and end arc as a radian value * / / * Start drawing hour * / ctx.beginPath (); ctx.moveTo (X, Y); ctx.lineWidth =. 7 ; ctx.lineCap = 'round' ; ctx.arc (X, Y, R & lt * 10/20 is, arcHour, arcHour, to false) ; // value of the radius r of 20 10 per ctx.stroke (); ctx.closePath (); / * start drawing minute * / ctx.beginPath (); ctx.moveTo (X, Y); ctx.lineWidth . 5 = ; ctx.lineCap = 'round' ; ctx.arc (X, Y, r * 12 is / 20 is, arcmin, arcmin, to false); // a radius r value of 20 parts per 12 is ctx.stroke (); ctx.closePath (); / * start drawing seconds * / ctx.beginPath (); ctx.moveTo (X, Y); ctx.lineWidth = 2 ; ctx.lineCap = 'round' ; ctx.arc (X, Y, r * 16/20 is, arcSen, arcSen, to false); // value of the radius r of 20 16 per ctx.stroke (); ctx.closePath (); } the setInterval ( 'drawClock ()', 1000); / / every 1 second timer function is invoked to draw a clock function </ Script> </ body> </ HTML>