个回答

• 刘智辉123456

  2017-05-15 20:49:13

  已采纳

  var dom=document.getElementById('clock');

  var ctx=dom.getContext('2d');

  var width=ctx.canvas.width;

  var height=ctx.canvas.height;

  var r = width/2;

  var rem=width/200;

  function drawBackground(){

     ctx.save();

     ctx.translate(r,r);

     ctx.beginPath();

     ctx.lineWidth=10 * rem;

     ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);

     ctx.stroke();

     

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

     ctx.font=18*rem+'px Arial';

     ctx.textAlign='center';

     ctx.textBaseline='middle';

     hourNum.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();

     var rad=2*Math.PI/12*hour;

     var minrad=2*Math.PI/12/60*minute;

     ctx.rotate(rad+minrad);

     ctx.lineWidth=6*rem;

     ctx.lineCap='round';

     ctx.moveTo(0,10*rem);//线的起始位置  下面是线的终点

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

     ctx.stroke();

     ctx.restore();

  }

  function drawMinute(minute,second){

     ctx.save();

     ctx.beginPath();

     var rad=2*Math.PI/60*minute;

     var minrad=2*Math.PI/60/60*second;

     ctx.rotate(rad+minrad);

     ctx.lineWidth=3*rem;

     ctx.lineCap='round';

     ctx.moveTo(0,10*rem);

     ctx.lineTo(0,-r+30*rem);

     ctx.stroke();

     ctx.restore();

  }

  function drawSecond(second){

     ctx.save();

     ctx.beginPath();

     ctx.fillStyle='#c14543';

     var rad=2*Math.PI/60*second;

     ctx.rotate(rad);

     ctx.moveTo(-2*rem,20*rem);

     ctx.lineTo(2*rem,20*rem);

     ctx.lineTo(1,-r+18*rem);

     ctx.lineTo(-1,-r+18*rem);//三个lineTo说明有三条线

     ctx.fill();

     ctx.restore();

  }

  function drawDot(){

     ctx.beginPath();

     ctx.fillStyle='#fff';

     ctx.arc(0,0,2*rem,0,2*Math.PI,false);

     ctx.fill();

  }

  function draw(){

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

     var now=new Date();

     var hour=now.getHours();

     var minute=now.getMinutes();

     var second=now.getSeconds();

     drawBackground();

     drawHour(hour,minute);

     drawMinute(minute,second);

     drawSecond(second);

     drawDot();

     ctx.restore();

  }

  draw();

  setInterval(draw,1000);

  
  

  这样哦，原因是

  function drawBackground(){

     ctx.save();

     ctx.translate(r,r);

     ctx.beginPath();

     ctx.lineWidth=10 * rem;

     ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);

     ctx.stroke();

  中的r-ctx.lineWidth/2写掉了r-

  帮助到你了吗//
  

  0