关于技术您现在的位置是:首页 > 关于技术

用 Canvas 绘制一个时钟

头像 2019-01-22 18:03:56 327 人已围观 0 条评论

简介

今天,我们用Canvas来画一个简单的时钟,带指针的哦! 话不多说,老规矩,上最终效果图: 看着很简单吧,直接 […]

今天,我们用Canvas来画一个简单的时钟,带指针的哦!

话不多说,老规矩,上最终效果图:

看着很简单吧,直接上代码。

页面布局html:

<canvas id="c1" width="400px" height="400px"></canvas>

就是定义一个canvas画布,给一个宽高即可。

css样式的话这里就不做了,直接来看js吧:

window.onload = function(){
  var oC = document.getElementById('c1');
  var oGC = oC.getContext('2d');

  setInterval(toDrow,1000);
  toDrow();

  function toDrow(){
  var x=200;
  var y=200;
  var r=150;

  // 清空画布
  oGC.clearRect(0,0,oC.width,oC.height);

  var oD=new Date();
  var oH=oD.getHours();
  var oM=oD.getMinutes();
  var oS=oD.getSeconds();

  // 定义时针、分针、秒针的角度
  var oHValue=(-90+oH*30+oM/2+oS/120)*Math.PI/180;
  var oMValue=(-90+oM*6+oS/10)*Math.PI/180;
  var oSValue=(-90+oS*6)*Math.PI/180;

  // 画小刻度
  oGC.beginPath();
  for(var i=0; i<60; i++){
  oGC.moveTo(x,y);
  oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
  }
  oGC.closePath();
  oGC.stroke();

  // 画小刻度表盘遮盖
  oGC.fillStyle='#fff';
  oGC.beginPath();
  oGC.arc(x,y,r*19/20,0,360*Math.PI/180,false);
  oGC.closePath();
  oGC.fill();

  // 画大刻度
  oGC.lineWidth=3;
  oGC.beginPath();
  for(var i=0; i<12; i++){
  oGC.moveTo(x,y);
  oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
  }
  oGC.closePath();
  oGC.stroke();

  // 画大刻度表盘遮盖
  oGC.fillStyle='#fff';
  oGC.beginPath();
  oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);
  oGC.closePath();
  oGC.fill();

  // 画表芯
  oGC.fillStyle="#000";
  oGC.beginPath();
  oGC.arc(x,y,6,0,360*Math.PI/180,false);
  oGC.closePath();
  oGC.fill();

  // 画时针
  oGC.lineWidth=5;
  oGC.beginPath();
  oGC.moveTo(x,y);
  oGC.arc(x,y,r*10/20,oHValue,oHValue,false);
  oGC.closePath();
  oGC.stroke();

  // 画分针
  oGC.lineWidth=3;
  oGC.beginPath();
  oGC.moveTo(x,y);
  oGC.arc(x,y,r*14/20,oMValue,oMValue,false);
  oGC.closePath();
  oGC.stroke();

  // 画秒针
  oGC.lineWidth=1;
  oGC.beginPath();
  oGC.moveTo(x,y);
  oGC.arc(x,y,r*18/20,oSValue,oSValue,false);
  oGC.closePath();
  oGC.stroke();

  };
};

我们看着上图js内容,捡重点来说明一下。

首先,我们定义一个画图的函数toDrow(),一上来呢,我们就要先清空一下画布,然后再开始绘制。

我们用Date()方法来获取当前时间数据,这很简单,然后,最关键的来了,就是定义时针、分针、秒针在某一刻的角度。

先计算度数然后乘以π,再除以180转化为弧度。时针走一格是30°,分针和秒针走一格都是6°,其中,-90 是因为钟表的0点(即12点)是在最上方,而canvas绘制圆弧的起点是在最右端,因此算度数的时候要减去90°。然后就得如下算法:

  // 定义时针、分针、秒针的角度
      var oHValue=(-90+oH*30+oM/2+oS/120)*Math.PI/180;
      var oMValue=(-90+oM*6+oS/10)*Math.PI/180;
      var oSValue=(-90+oS*6)*Math.PI/180;

然后,其他的都好理解了,每一段代码是做什么的都有注释,跟着代码敲一遍,就明白了。

最后我们定义一个定时器,每秒执行一次这个toDrow()函数就ok了,相当于每秒重绘一次,就看到了时钟表针走动的效果。狠戳这里来看效果。

今天就到这里了,相信大家还有其他方法做这个钟表效果,我们,加油!

Over,拜~

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号