3回答

• 

  muwenyuan

  2016-10-13 14:56:00

  已采纳

  在drawBackground()开始那保存一下当前的环境状态

  1 0

  不C

  非常感谢！

  2016-11-01 19:25:09

  共 1 条回复 >

• 

  慕粉3704219

  2016-12-08 15:51:25

  我的也是这个问题，一秒之后就变了，这是怎么回事能回答一下么

  /**
  * Created by Administrator on 2016/12/8 0008.
  */
  var dom=document.getElementById('clock');//获取canvas元素
  var ctx=dom.getContext('2d');//读取canvas内容
  var width=ctx.canvas.width;
  var height=ctx.canvas.height;//获取canvas宽高
  var r=width/2;//取得时钟半径，为正方形一半
  
  function drawBackground(){
     ctx.save();
     ctx.translate(r,r);//把圆心挪到指定的位置。因为（0，0）位置在正方形的左上角
     ctx.beginPath();//指定路径
     ctx.lineWidth=10;
     ctx.arc(0,0,r-5,0,2*Math.PI,false)//画圆形,但没出来，因为没定义是填充还是绘制
     ctx.stroke();//绘制，qianmian需要定义线条
  
     var hourNumber=[3,4,5,6,7,8,9,10,11,12,1,2];//定义数组存贮小时数
     ctx.font='18px Arial';
     ctx.textAlign='center';
     ctx.textBaseline='middle';
     hourNumber.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++){
         //遍历60个点,
         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){
     ctx.save();
     //花小时针
     ctx.save();//保存之气那的画布
     ctx.beginPath();
     var rad=2*Math.PI/12*hour;
     ctx.rotate(rad);
     ctx.lineWidth=6;
     ctx.lineCap='round';
     ctx.moveTo(0,10);//
     ctx.lineTo(0,-r/2);
     ctx.stroke();
     ctx.restore();//还原小时之前的画布
  }
  
  function drawMinute(minute){
     ctx.save();
     ctx.beginPath();
     var rad=2*Math.PI/60*minute;
     ctx.rotate(rad);
     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();
     ctx.fillStyle='#c14543';
     var rad=2*Math.PI/60*second;
     ctx.rotate(rad);
    /* ctx.lineWidth=3;
     ctx.lineCap='round';*/
     ctx.moveTo(-2,20);
     ctx.lineTo(2,20);
     ctx.lineTo(1,-r+18);
     ctx.lineTo(-1,-r+18);
     ctx.fill();
     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);
     drawBackground();
     var now=new Date();
     var hour=now.getHours();
     var minute=now.getMinutes();
     var second=now.getSeconds();
  
     drawHour(hour,minute);
     drawMinute(minute);
     drawSecond(second);
     drawDot();
     ctx.restore();
  }
  
  setInterval(draw,1000);//每秒都画一次时分秒针，但是会留有以前的
  
  
  

  0 0
• 

  慕神2706593

  2016-10-22 15:29:13

  保存了也是这个样子。。我也是同样的问题。。求大神

  
  

  1 0

  追觅梦初的国...

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

  2016-11-11 17:54:25

  共 1 条回复 >