HTML5 canvas example of drawing clocks, refer to other people's examples, organize and complete, with detailed comments
Reference: http://www.html5tricks.com/demo/html5-canvas-circle-clock/index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id="myCanvas" width="400" height="400" style="border:5px solid #888;background-color:#edf;"></canvas> </body> </html>
var c = document.getElementById('myCanvas').getContext('2d'); function clock(){ // clear the canvas c.clearRect(0,0,400,400); var data = new Date(); var sec =data.getSeconds(); var min = data.getMinutes (); var hour=data.getHours(); var year=data.getFullYear(); var month=data.getMonth()+1; var day =data.getDate(); //Save the current state of the environment c.save(); //Remap the (0,0) position on the canvas c.translate(200,200); //Rotate the current drawing (rotate 1/4 of the circular path counterclockwise) c.rotate(-2*Math.PI/4); //minute tick (draw 60 tick marks) for(var i=0;i<60;i++){ c.beginPath(); c.strokeStyle = "#f00"; c.lineWidth = 5; c.moveTo (110.0); c.lineTo(120,0); c.stroke(); //Draw a clock tick mark every 6deg (circular path rotated 1/60 clockwise) c.rotate(2*Math.PI/60); c.closePath(); } //Clock tick marks (draw 12 tick marks) for(var i=0;i<12;i++){ c.beginPath(); c.strokeStyle = "#000"; c.lineWidth = 8; c.moveTo (100.0); c.lineTo(120,0); c.stroke(); //Draw a clock tick mark every 30deg (circular path rotated 1/12 clockwise) c.rotate(2*Math.PI/12); c.closePath(); } c.rotate(-1); //Clock tick numbers (draw 12 tick numbers) for(var i=0;i<12;i++){ c.beginPath(); c.strokeStyle = "blue"; c.lineWidth = 2 ; c.strokeText(i+1,0,90); // draw a clock tick every 30deg c.rotate(2*Math.PI/12); c.closePath(); } c.rotate(1); //time display c.rotate(2*Math.PI/4); c.font="30px Song"; c.strokeText(year+"-"+month+"-"+day+" "+hour+":"+min+":"+sec,-130,180); c.rotate(-2*Math.PI/4); //outer dial c.beginPath(); c.strokeStyle = "pink"; c.lineWidth = 12 ; // draw circle c.arc(0,0,135,0,Math.PI*2); c.stroke(); c.closePath(); // draw the hour hand hour = hour>12?hour-12:hour; c.beginPath(); //Save the current state of the environment c.save(); //Rotate the current clock clockwise to point to the arc path formed c.rotate(2*Math.PI/12*hour+2*Math.PI/12/60*min+2*Math.PI/12/3600*sec); c.strokeStyle = "yellowgreen"; c.lineWidth = 4; c.moveTo (-20.0); c.lineTo(50,0); c.stroke(); //Return the previously saved path state and attributes c.restore(); c.closePath(); // draw the minute hand c.beginPath(); //Save the current state of the environment c.save(); //Rotate the current minute hand clockwise to point to the arc path formed c.rotate(2*Math.PI/60*min+2*Math.PI/60/60*sec); c.strokeStyle = "springgreen"; c.lineWidth = 3; c.moveTo (-30.0); c.lineTo(70,0); c.stroke(); //Return the previously saved path state and attributes c.restore(); c.closePath(); // draw the second hand c.beginPath(); //Save the current state of the environment c.save(); //Rotate the current second hand clockwise to point to the arc path formed c.rotate(2*Math.PI/60*sec); c.strokeStyle = "red"; c.lineWidth = 2 ; c.moveTo (-40.0); c.lineTo(120,0); c.stroke(); //Return the previously saved path state and attributes c.restore(); c.closePath(); c.restore(); } clock(); setInterval(clock,1000);