canvas 绘制时钟特效

说明：作为canvas初学者，好多知识都还没来得及深入了解，写下特效实现的梗概，谨以此纪念自己的第一次canvas 实践

时光机

1. 什么是canvas

   canvas 是html5 新增的一个利用js脚本绘制位图的标签，canvas 标签作为画布，本身不具有绘图的能力，而是依赖其对应的上下文对象【利用getContext()方法取得,以下简称‘canvas对象’】的一组API来实现。

2. canvas的应用场景

   canvas 对象常用于图标绘制，小游戏，活动页面，小特效等。

3. 时钟特效

   实现过程可以分为三个步骤：绘制钟面，绘制指针指向，利用setInterval()循环调用绘制方法.

   • 绘制钟面 ：通过moveTo()方法，指定路径的起点，再利用arc()方法分别绘制度数为6和30的弧，再循环绘制，绘制出钟面

   • 绘制指针指向：创建一个时间对象，求出当前时间的时、分、秒，再利用moveTo与arc()方法绘制指针【注意：arc中当起始弧度与结束弧度相同时，可以绘制直线】

   • setInterval()循环调用：设置间隔时间为1秒，循环绘制图像

/*绘制分针刻度线,时针与分针实现思路相同,只需要每次递增30度*/
 var num=0;
 for(var i=0;i<60;i++){
       ndCanvas.moveTo(250,250);
       ndCanvas.arc(250,250,180,num*Math.PI/180,(num+6)*Math.PI/180,false);
       ndCanvas.stroke();
       num+=6;
}
 ndCanvas.beginPath();
 ndCanvas.save();
 ndCanvas.fillStyle='#fff';
 ndCanvas.arc(250,250,170,0,2*Math.PI,false)
 ndCanvas.fill();
 ndCanvas.restore();

/*注意arc()方法的起始点在3点钟位置,所以绘制路径时,将起始位置,逆时针旋转90度,调整为以0点钟作为方向*/
var time=new Date();
var hours=time.getHours();
var minS=time.getMinutes();
var secS=time.getSeconds();
//分针指向(时针和秒针实现思路相同)
ndCanvas.beginPath();
ndCanvas.save();
ndCanvas.lineWidth=4;
ndCanvas.moveTo(250,250);
ndCanvas.arc(250,250,130,(minS*6-90)*Math.PI/180,(minS*6-90)*Math.PI/180,false);
ndCanvas.stroke();
ndCanvas.restore();

/*循环绘制[每次重新绘制前,都需要用clearRect()方法清除画布]*/
function startDraw(){
  timeCode = setInterval(function(){
      timer();     
 },1000);
}

视频参考资料
文字参考资料
gitHub源码