canvas时针
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:#000;} #c1{ background:#fff;} </style> <script type="text/javascript"> 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 oDate = new Date(); var oHours = oDate.getHours(); var oMin = oDate.getMinutes(); var oSen = oDate.getSeconds(); var oHoursvalue = (-90 + oHours*30 + oMin/2) * Math.PI/180; var oMinvalue = (-90 + oMin*6) * Math.PI/180; var oSensvalue = (-90 + oSen*6) * Math.PI/180; /*oGc.moveTo(x,y); oGc.arc(x,y,r,0,6*Math.PI/180,false); oGc.moveTo(x,y); oGc.arc(x,y,r,6*Math.PI/180,12*Math.PI/180,false); oGc.stroke();*/ 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.closePath(); oGc.stroke(); oGc.fillStyle="white"; oGc.beginPath(); oGc.moveTo(x,y); oGc.arc(x,y,r*19/20,0*Math.PI/180,360*Math.PI/180,false); oGc.closePath(); oGc.fill(); oGc.lineWidth = 3; oGc.beginPath(); 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.closePath(); oGc.stroke(); oGc.fillStyle="white"; oGc.beginPath(); oGc.moveTo(x,y); oGc.arc(x,y,r*18/20,0*Math.PI/180,360*Math.PI/180,false); oGc.closePath(); 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,oMinvalue,oMinvalue,false); oGc.closePath(); oGc.stroke(); oGc.lineWidth = 1; oGc.beginPath(); oGc.moveTo(x,y); oGc.arc(x,y,r*19/20,oSensvalue,oSensvalue,false); oGc.closePath(); oGc.stroke(); }; setInterval(toDraw,1000); toDraw(); }; </script> </head>
<body> <canvas id="c1" width="400" height="400"></canvas> </body> </html>
