Index.html
<!doctype html>var Dom=document.getelementbyid (' clock '), Var ctx=dom.getcontext (' 2d '), var width=ctx.canvas.width;//definition width var height= ctx.canvas.height;//define the height var r=width/2;//define the RADIUS var rem=width/200;//define the clock size change//Draw the outer circle function Dranbackground () {Ctx.save ( );//Save Current Environment state ctx.translate (R,R);//Transfer or move ctx.beginpath ();//start path ctx.linewidth=10 *rem;//set line width Ctx.arc (0,0,r-ct X.LINEWIDTH/2, 0,2*math.pi,false);//Draw Arc: x=0,y=0, radius minus ctx.linewidth/2 width, start path, end path, clockwise rotation ctx.stroke ();//Draw Line// Draw the digital var hours=[3,4,5,6,7,8,9,10,11,12,1,2];//12 hours ctx.font=18 *rem+ ' px Arial ';//font Properties ctx.textalign= ' center ';// Align left and right ctx.textbaseline= ' middle ';//upper and lower alignment hours.foreach (function (number,i) {var rad=2*math.pi/12*i;//radians per one hours *i var X=math.cos (RAD) * (r-30 *rem); var y=math.sin (RAD) * (r-30 *rem); Ctx.filltext (number,x,y);//Draw filled text (text, x-axis, y-axis) on canvas);//Draw Wonderful hour for (Var i=0;i<60;i++) {var rad=2*math.pi/60*i ;//The radian of each wonderful number *i var x=math.cos (RAD) * (R-18*rem); var Y=math.sin (rad) * (R-18*REM); Ctx.beginpath ();//Start point//This if the number is if the fill is black every 5 hours, otherwise the gray if (i%5===0) {ctx.fillstyle= ' #000 '; Ctx.arc (X,y,2*rem,0,2*math.pi,false); } else{ctx.fillstyle= ' #ccc '; Ctx.arc (X,y,2*rem,0,2*math.pi,false); } ctx.fill ();//Draw fill}}//draw the hour function Dranhour (hour,minute) {ctx.save ();//Save Current Environment State ctx.beginpath ();//Starting point var rad=2*math.pi/12*hour;//radians to circle/60 seconds * Hour 1 points var mrad=2*math.pi/12/60*minute;//radians for circle/60 seconds * minute hand 30 min ctx.rotate (Rad+mrad) ;//rotate to the hour of Arc + minute Radian ctx.linewidth=6*rem;//line width is 6 ctx.linecap= ' round ';//The line turns round Ctx.moveto (0,10);//from x 0 to Y ctx.linet O (0,-R/2);//Draw to x 0 to Y for-R/2 length ctx.stroke ();//Draw line Ctx.restore ();//Return the previously saved path state and properties}//draw the minute hand function Dranminute (minute) { Ctx.save ();//Save Current Environment State ctx.beginpath ();//start Var rad=2*math.pi/60*minute;//radians for circle/60 seconds * minute hand 30 minutes ctx.rotate (RAD);//Turn to The minute hand radian ctx.linewidth=3*rem;//line width is 3 ctx.linecap= ' round ';//The line turns round Ctx.moveto (0,10*rem);//from x 0 to Y for CTX.lineto (0,-r+30*rem);//Draw to x 0 to Y for-r+30 length ctx.stroke ();//Draw line Ctx.restore ();//Return the previously saved path state and properties}//draw pin function Dransecond (second) {ctx.save ();//Save Current Environment State ctx.beginpath ();//Start ctx.fillstyle= ' red ';//fill in red Var rad=2*math.pi/ 60*second;//radians/60 seconds * seconds 15 seconds Ctx.rotate (RAD)///rotating second hand radian Ctx.moveto ( -2*rem,20*rem),//from x 2 to Y Ctx.lineto (2*rem,20*r EM);//Draw X to 2 to Y for 20 length Ctx.lineto (1,-r+18*rem),//Draw x 1 to Y for-r+18 length Ctx.lineto ( -1,-r+18*rem),//Draw X to 1 to Y for-r+18 length Ctx.fill ();//Draw fill ctx.restore ();//Returns the path state and properties that were previously saved}//draw the white dot function Drandot () {Ctx.beginpath () in the hour, minute, and coup;//Start Ctx.fillstyl E= ' #fff ';//filled with white Ctx.arc (0,0,3*rem,0,2*math.pi,false),//x axis is 0,y axis 0, RADIUS is 3, starting point is 0, end is 2*math.pi (circle), clockwise Ctx.fill ();// Draws the fill}function Dran () {ctx.clearrect (0,0,width,height);//empties the specified graphics pixel var now=new Date ();//Get current time Var hour=now.gethour s ();//execute current hour hand var minute=now.getminutes ();//perform current minute hand var second=now.getseconds ();//execute current second hand dranbackground ();//variable Outer circle value Dranhour (Hour,minute);//variable hour-value DrAnminute (minute);//variable minute hand value Dransecond (second);//Variable Value Drandot ();//variable Center dot value ctx.restore ();//Return the previously saved path state and properties}dran ();/ Execute once setinterval (dran,1000)//execute once per second
Canvas Clock Drawing
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
