2回答

• 

  慕工程0708615

  2017-02-19 15:45:51

  已采纳

  得看下你的代码，在draw（）函数里面的ctx.restore（）之前的函数（drawSecond（））里面的开始不需要ctx.save()，后面也不需要ctx.restore()，我的一开始就是因为设置秒针的函数的开头设置了个ctx.save(),右下角四分之一没了，因为你在设置秒针的开头设置一个ctx.save（）会导致draw里面的清除函数的画布原点，变成秒针的原点，也就是圆的中心点，今天才刚开始学canvas，也不知道我理解的对不对，反正你可以试试
  

  0 0
• 

  慕圣1391341

  2017-03-19 00:38:25

  var dom= document.getElementById('clock');
  var ctx= dom.getContext('2d');
  var width=ctx.canvas.width;
  var height= ctx.canvas.height;
  var r=width/2;
  
  
  function  drawBackground(){
      ctx.save();
      ctx.translate(r,r); //初始化坐标原点
      ctx.beginPath();
      ctx.lineWidth=10;
      ctx.arc(0,0,r-5,0,2*Math.PI,false);
      ctx.stroke();
  //画小时数
      var  hoursNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
      ctx.font="18px Arial";
      ctx.textAlign="center";
      ctx.textBaseline="middle";
      hoursNumbers.forEach(function (number,i){
          var rad =2*Math.PI/12*i;
          var x=Math.cos(rad)*(r-30);
          var y=Math.sin(rad)*(r-30);
          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);
          var y =Math.sin(rad)*(r-18);
          ctx.beginPath();
          if(i%5===0){
              ctx.fillStyle="#000";
              ctx.arc(x,y,2,0,2*Math.PI,false);
          }else{
              ctx.fillStyle="#ccc";
              ctx.arc(x,y,2,0,2*Math.PI,false);
          }  
          ctx.fill();
      }
  }
  //时针
  function drawHour(hour,minute,second){
      ctx.save();
      ctx.beginPath();
      var rad=2*Math.PI/12*hour;
      var mrad=2*Math.PI/12/60*minute;
      var srad=2*Math.PI/12/60/60*second;
      ctx.rotate(rad+mrad+srad);
      ctx.lineWidth=6;
      ctx.lineCap="round";
      ctx.moveTo(0,10);
      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 srad=2*Math.PI/60/60*second;
      ctx.rotate(rad+srad);
      ctx.lineWidth=3;
      ctx.lineCap="round";
      ctx.moveTo(0,10);
      ctx.lineTo(0,-r+30);
      ctx.stroke();
      ctx.restore();
  }
  //秒针
  function drawSecond(second){
      ctx.save();
      ctx.beginPath();
      var rad=2*Math.PI/60*second;
      ctx.rotate(rad);
      ctx.lineWidth=1;
      ctx.moveTo(0,10);
      ctx.lineTo(0,-r+18);
      ctx.strokeStyle="red";
      ctx.stroke();    
      ctx.restore();
  }
  //圆点
  function drawDot(){
      ctx.beginPath();
      ctx.fillStyle="#fff";
      ctx.arc(0,0,3,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,second);
     drawMinute(minute,second);
     drawSecond(second); 
     drawDot(); 
     ctx.restore();
  }
  draw();
  
  setInterval(draw,1000);

  
  

  0 0