炫丽的时钟效果

改编自慕课网-炫丽的倒计时效果Canvas绘图与动画基础

• 使用了两个canvas来分别绘制时钟和跳动的小球;

 <canvas  width="1300" height="768" id="layer1"
         style=" position: absolute; z-index: 0;border: 2px black dashed;"></canvas>
 <canvas  width="1300" height="768" id="layer2"
         style="position: absolute; left: 0; top: 0; z-index: 1;border: 2px black dashed;"></canvas>

• 在drawNum()函数中使用了闭包来封装私有变量idx，从而实现了局部重绘，并且减少了代码量。

 function drawNum(){
      var _idx ;
      return function(ctx,idx,left,top){
          if(idx != _idx){
          ...
           _idx = idx;
          }
      };
  }