js Canvas绘制圆形时钟效果

vardom=document.getElementById('clock');

varcxt=dom.getContext("2d");

varwidth=cxt.canvas.width;

varheight=cxt.canvas.height;

varr=width/2;

functiondrawBackground(){

  cxt.save();

  cxt.translate(r,r);

  cxt.beginPath();

  cxt.lineWidth=10;

  cxt.arc(0,0,r-5,0,2*Math.PI,false);

  cxt.stroke();

  cxt.font="18px Arial";

  cxt.textAlign='center'

  cxt.textBaseline='middle'

  varhourNums=[3,4,5,6,7,8,9,10,11,12,1,2];

  hourNums.forEach(function(number,i){

    varrad=2*Math.PI/12*i;

    varx=Math.cos(rad)*(r-30);

    vary=Math.sin(rad)*(r-30);

    cxt.fillText(number,x,y);

  });

  for(vari=0;i<60;i++){

    varrad=2*Math.PI/60*i;

    varx=Math.cos(rad)*(r-18);

    vary=Math.sin(rad)*(r-18);

    cxt.beginPath();

    if(i % 5===0){

      cxt.fillStyle="#000"

      cxt.arc(x,y,2,0,2*Math.PI,false);

    }

    else{

      cxt.fillStyle="#ccc"

      cxt.arc(x,y,2,0,2*Math.PI,false);

    }

    cxt.fill();

  }

}

functiondrawHour(hour,minute){

  cxt.save();

  cxt.beginPath();

  varrad=2*Math.PI/12*hour;

  varmrad=2*Math.PI/12/60*minute

  cxt.rotate(rad+mrad);

  cxt.lineWidth=6;

  cxt.lineCap='round'

  cxt.moveTo(0,10);

  cxt.lineTo(0,-r/2);

  cxt.stroke();

  cxt.restore();

}

functiondrawMinute(minute){

  cxt.save();

  cxt.beginPath();

  varrad=2*Math.PI/60*minute;

  cxt.rotate(rad);

  cxt.lineWidth=3;

  cxt.lineCap='round'

  cxt.moveTo(0,10);

  cxt.lineTo(0,-r+30);

  cxt.stroke();

  cxt.restore();

}

functiondrawSecond(second){

  cxt.save();

  cxt.beginPath();

  cxt.fillStyle='#c14543'

  varrad=2*Math.PI/60*second;

  cxt.rotate(rad); 

  cxt.moveTo(-2,20);

  cxt.lineTo(2,20);

  cxt.lineTo(1,-r+18);

  cxt.lineTo(-1,-r+18);

  cxt.fill();

  cxt.restore();

}

functiondrawDot(){

  cxt.beginPath();

  cxt.fillStyle='#fff'

  cxt.arc(0,0,3,0,2*Math.PI,false);

  cxt.fill();

}

functiondraw(){

  cxt.clearRect(0,0,width,height);

  varnow=newDate();

  varhour=now.getHours();

  varminute=now.getMinutes();

  varsecond=now.getSeconds();

  drawBackground();

  drawHour(hour,minute);

  drawMinute(minute);

  drawSecond(second);

  drawDot();

  cxt.restore();

}

draw();

setInterval(draw,1000);