<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body{ background:pink; } #c1{ background:white; } </style> <script> window.onload = function () { var oc = document.getElementById('c1'); var ogc = oc.getContext('2d'); function toDraw() { var x = 200; var y = 200; var r = 150; ogc.clearRect(0,0,oc.width,oc.height); var aDate = new Date(); var oHouse = aDate.getHours(); var oMin = aDate.getMinutes(); var oSen = aDate.getSeconds(); var oHoursevalue = ( -90 + oHouse*30 + oMin/2)*Math.PI/180; var oMinvalue = ( -90 + oMin*6 )*Math.PI/180; var oSenvalue = ( -90 + oSen*6)*Math.PI/180; ogc.beginPath(); for(var i = 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.stroke(); } ogc.closePath(); ogc.beginPath(); ogc.fillStyle = 'white'; ogc.moveTo(x,y); ogc.arc(x,y,r*19/20,0,360,false); ogc.fill(); ogc.closePath(); ogc.beginPath(); ogc.lineWidth = 3 for(var i = 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.stroke(); } ogc.closePath(); ogc.beginPath(); ogc.fillStyle = 'white'; ogc.moveTo(x,y); ogc.arc(x,y,r*18/20,0,360,false); ogc.fill(); ogc.closePath(); ogc.beginPath(); ogc.lineWidth = 5 ogc.moveTo(x,y); ogc.arc(x,y,r*5/20,oHoursevalue,oHoursevalue,false); ogc.stroke(); ogc.closePath(); ogc.beginPath(); ogc.lineWidth = 3 ogc.moveTo(x,y); ogc.arc(x,y,r*8/20,oMinvalue,oMinvalue,false); ogc.stroke(); ogc.closePath(); ogc.beginPath(); ogc.lineWidth = 1 ogc.moveTo(x,y); ogc.arc(x,y,r*18/20,oSenvalue,oSenvalue,false); ogc.stroke(); ogc.closePath(); } toDraw(); setInterval(toDraw,1000); } </script> </head> <body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>