<! DOCTYPEHTML><HTML><Headlang="en"> <Metacharset="UTF-8"> <title></title> <style>Body{background:#000;}#c1{Background-color:#fff;} </style> <Script>window. onload=function(){varOc=Document. getElementById (' C1 ');varOgc=oc.getcontext (' 2d ');functionTodraw () {varx=200;vary=200;varr=150; Ogc.clearrect (0,0,OGC.width, OGc.Height);varOdate=NewDate ();varOhours=odate.gethours ();varOmin=odate.getminutes ();varOsen=odate.getseconds ();varOhoursvalue= ( -90+OHOURS*30+OMIN/2) *math.pi/180;varOminsvalue= ( -90+omin*6) *math.pi/180;varOsenvalue= ( -90+osen*6) *math.pi/180; Ogc.beginpath (); for(vari=0;i<60;i++) {Ogc.moveto (x, y); Ogc.arc (x,y,r,6*i*math.pi/180,6* (i+1) *math.pi/180,false); } ogc.closepath (); Ogc.stroke (); ogc.fillstyle=' White '; Ogc.beginpath (); Ogc.closepath (); Ogc.moveto (x, y); Ogc.arc (x,y,r*19/20,0,360*math.pi/180,false); Ogc.fill (); ogc.linewidth=3; Ogc.beginpath (); for(vari=0;i<12;i++) {Ogc.moveto (x, y); Ogc.arc (x,y,r,30*i*math.pi/180,30* (i+1) *math.pi/180,false); } ogc.closepath (); Ogc.stroke (); ogc.fillstyle=' White '; Ogc.beginpath (); Ogc.closepath (); Ogc.moveto (x, y); Ogc.arc (x,y,r*18/20,0,360*math.pi/180,false); Ogc.fill (); ogc.linewidth=5; Ogc.beginpath (); Ogc.moveto (x, y); Ogc.arc (X,y,r*10/20,ohoursvalue,ohoursvalue,false); Ogc.closepath (); Ogc.stroke (); ogc.linewidth=3; Ogc.beginpath (); Ogc.moveto (x, y); Ogc.arc (X,y,r*14/20,ominsvalue,ominsvalue,false); Ogc.closepath (); Ogc.stroke (); ogc.linewidth=1; Ogc.beginpath (); Ogc.moveto (x, y); Ogc.arc (X,y,r*19/20,osenvalue,osenvalue,false); Ogc.closepath (); Ogc.stroke (); } setinterval (todraw,1000); Todraw (); } </Script></Head><Body><Canvasid="C1"width=" the"height=" the"></Canvas></Body></HTML>
Draw a clock with canvas