3回答

• 

  udnernahs

  2016-12-22 11:43:43

  已采纳

  var canvas = document.getElementById("clock")

         canvas.width =200

         canvas.height = 200

         var ctx = canvas.getContext("2d")

  
  

       var width=ctx.canvas.width;

       var height=ctx.canvas.height;

       var r=width/2;

  
  

     

    

      function drawDot(){  

        setInterval(draw,1000);

      }

  
  

      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 hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];

          hourNumbers.forEach(function(number,i){

          ctx.font='18px Arial'

          ctx.textAlign='center';

          ctx.textBaseline='middle';

          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=(r-20)*Math.cos(rad);

              var y=(r-20)*Math.sin(rad);

              ctx.beginPath();

                  if(i%5==0){

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

                         ctx.fillStyle='#000';

                  }

              else{

             

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

              ctx.fillStyle='#ccc';

              }

              ctx.fill();

         }

     }

      function drawHour(hour,minu){

      // alert("110");

      ctx.save();

      ctx.beginPath();

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

      var mrad=2*Math.PI/12/60*minu;

      ctx.lineWidth=5;

      ctx.linecap='round';

      ctx.rotate(rad+mrad);

      ctx.moveTo(0,10);

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

      ctx.stroke();

      ctx.restore();

     }

      function drawMinute(minu){

      ctx.save();

      ctx.beginPath();

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

      ctx.lineWidth=3;

      ctx.linecap='round';

      ctx.rotate(rad);

      ctx.moveTo(0,10);

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

      ctx.stroke();

      ctx.restore();

      }

      function drawSecond(second){

      ctx.save();

      ctx.beginPath();

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

      ctx.lineWidth=1;

      ctx.linecap='round';

      ctx.strokeStyle='#0000ff';

      ctx.rotate(rad);

      ctx.moveTo(0,10);

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

      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 minu=now.getMinutes();

      var second=now.getSeconds();

      drawBackground();

      drawHour(hour,minu);

      drawMinute(minu);

      drawSecond(second);

      drawDot();

      // ctx没有restore

      ctx.restore();

      }

      // 没有设置定时器

      setInterval(draw, 1000);

  
  

  0 0
• 

  慕少1320056

  2016-12-26 11:32:40

  restore（）只返回最近保存的环境，draw（）里面restore（）的是drawBackground（）里面
  save（）的环境

  0 0
• 

  慕粉4042427

  2016-12-22 19:12:17

  非常感谢，动起来了，但还请多指教一下，原在各其他函数声名中己包含ctx.restore();与ctx.restore(); setInterval(draw, 1000);，为何还要在function draw()添加，还有是不是我的电脑问题，走动约10后停止，过10多秒后又刷新即时时间，如此重复，我用的是火弧

  0 0