3回答

• 

  慕粉4409362

  2017-05-24 16:33:48

  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 - 5,0,2*Math.PI,false);
   ctx.stroke();
   
   var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
   ctx.font = 18 * rem + 'px Arial';
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';
   hourNumbers.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 mrad = 2 * Math.PI / 12 /60 * minute;
   ctx.rotate(rad + mrad);
   ctx.lineWidth = 6 * rem;
   ctx.lineCap = 'round';
   ctx.moveTo(0,10 * rem);
   ctx.lineTo(0, -r / 2 );
   ctx.stroke();
   ctx.restore();
  }
  function darwMinute(minute){
   ctx.save();
   ctx.beginPath();
   var rad = 2 * Math.PI / 60 * minute;
   ctx.rotate(rad);
   ctx.lineWidth = 3 * rem;
   ctx.lineCap = 'round';
   ctx.moveTo(0,10 * rem);
   ctx.lineTo(0, - r + 30 * rem);//指针长度
   ctx.stroke();
   ctx.restore();
  }
  function darwSecond(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);
   ctx.fill();
   ctx.restore();
  }
  function drawDot(){
   ctx.beginPath();
   ctx.fillStyle = '#fff';
   ctx.arc(0,0,3 * 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);
      darwMinute(minute);
      darwSecond(second);
      drawDot();
      ctx.restore();
  }
  setInterval(draw,1000);

  
  

  0 0
• 

  小码农tt

  2016-12-07 14:03:35

  不，页面加载前时钟就该初始化好，而不是等定时器1秒后在画时钟

  0 0
• 

  无所畏惧小小小

  2016-10-20 20:20:26

  1-删除第111行

  2-将77、78行改为
  

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

  1 0

  无所畏惧小小...

  错了.应该是删除第101行，让setInterval函数自动循环调用就好

  2016-10-20 20:21:33

  共 1 条回复 >