//var shi=1;
//var fen=10;
//var miao=1;
   var can;
   var ctx;
   var width;
   var height;
   var r;
   var rem;
window.onload=function()
{
    can=document.getElementById('myCanvas');
    ctx=can.getContext('2d');
    width=ctx.canvas.width;
    height=ctx.canvas.height;
    r=width*0.5;
    rem=width/200;
    draw();
setInterval(draw,1000);
    }

    function drawBackground()
    {   
            ctx.save();
        ctx.translate(r,r);
        ctx.font= 18*rem + 'px Arial';
       ctx.textAlign='center';
       ctx.textBaseline='middle';
       ctx.beginPath();
       ctx.lineWidth=4*rem;
       ctx.arc(0,0,r-ctx.lineWidth,0,Math.PI*2,false);
       ctx.stroke();
       var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];

       hourNumbers.forEach(function(number,i)
       {  var rad=2*Math.PI/12*i;      
         var x=Math.cos(rad)*(r-30*rem);
         var y=Math.sin(rad)*(r-30*rem);
         ctx.fillText(number,x,y);});
       for(var i=0;i<60;i++)
       {
        var rad=2*Math.PI/60*i;
        var x=Math.cos(rad)*(r-18*rem);
        var y=Math.sin(rad)*(r-18*rem);
        ctx.beginPath();
        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();
      }
      }
    function drawHour(hour,minute)
{  
    ctx.save(); 
    ctx.beginPath();
    ctx.lineWidth=6*rem;
    var rad=2*Math.PI/12*hour;

    var mrad=2*Math.PI/12/60*minute;
    ctx.rotate(rad+mrad);
    ctx.lineCap="round";
   ctx.moveTo(0,10*rem);
   ctx.lineTo(0,-r/2);
   ctx.stroke();
   ctx.restore();
}
function drawMinute(minute)
{
    ctx.save(); 
    ctx.beginPath();
    ctx.lineWidth=3*rem;
    var rad=2*Math.PI/60*minute;
    ctx.lineCap="round";

   ctx.rotate(rad);
   ctx.moveTo(0,10*rem);
   ctx.lineTo(0,-r+36*rem);
   ctx.stroke();
   ctx.restore();
}
function drawSecond(second)
{
    ctx.save(); 
    ctx.beginPath();
    ctx.lineWidth=3*rem;
    ctx.fillStyle="red";
    var rad=2*Math.PI/60*second;
   ctx.rotate(rad);
   ctx.moveTo(-2*rem,20*rem);
   ctx.lineTo(2*rem,-r+18*rem);
   ctx.lineTo(1,-r+16*rem);
   ctx.lineTo(-1,-r+16*rem);
   ctx.fill();
   ctx.restore();
}
function drawDot()
{
   ctx.save();
    ctx.beginPath();
    ctx.arc(0,0,3*rem,0,Math.PI*2);
    ctx.fillStyle="white";
    ctx.fill();
    ctx.restore();
}
function draw()
{  ctx.clearRect(0,0,width,height) ;
   var now = new Date();
   now.setHours(now.getHours()+shi);
   now.setMinutes(now.getMinutes()+fen);
   now.setSeconds(now.getSeconds()+miao);
   var Hour=now.getHours();
   var Minute=now.getMinutes();
   var Second=now.getSeconds();
   if (Hour<10)
  {
     Hour="0"+Hour;
  }
  if (Minute<10)
  {
     Minute="0"+Minute;
  }
  if (Second<10)
  {
     Second="0"+Second;
  }
   document.getElementById("Span1").innerText=Hour+":"+Minute+":"+Second;
   document.getElementById("jds").innerText=now.toDateString();
   
     drawBackground();


     drawHour(Hour,Minute);
     drawMinute(Minute);
     drawSecond(Second);
     drawDot();
     ctx.restore();

}
var shi=1;
var fen=0;
var miao=0;