改成了像电子钟那样的数字体 倒计时可以允许的小时数也改成了四位数

var WINDOW_WIDTH = 1366;
var WINDOW_HEIGHT = 600;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;

const endTime = new Date("2016/11/6,18:47:00");
var curShowTimeSeconds = 0

window.onload = function(){

   var canvas = document.getElementById('canvas');
   var context = canvas.getContext("2d");

   canvas.width = WINDOW_WIDTH;
   canvas.height = WINDOW_HEIGHT;

   curShowTimeSeconds = getCurrentShowTimeSeconds()
   setInterval(
       function(){
           render( context );
           update();
       }
       ,
       50
   );
}

function getCurrentShowTimeSeconds() {
   var curTime = new Date();
   var ret = endTime.getTime() - curTime.getTime();
   ret = Math.round( ret/1000 )

   return ret >= 0 ? ret : 0;
}

function update(){

   var nextShowTimeSeconds = getCurrentShowTimeSeconds();

   var nextHours = parseInt( nextShowTimeSeconds / 3600);
   var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours * 3600)/60 )
   var nextSeconds = nextShowTimeSeconds % 60

   var curHours = parseInt( curShowTimeSeconds / 3600);
   var curMinutes = parseInt( (curShowTimeSeconds - curHours * 3600)/60 )
   var curSeconds = curShowTimeSeconds % 60

   if( nextSeconds != curSeconds ){

       curShowTimeSeconds = nextShowTimeSeconds;
   }
}

function render( ctx ){

   ctx.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);

   var hours = parseInt( curShowTimeSeconds / 3600);
   var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 )
   var seconds = curShowTimeSeconds % 60

   renderDigit( MARGIN_LEFT, MARGIN_TOP , parseInt(hours/1000) , ctx );
  renderDigit( MARGIN_LEFT + 140, MARGIN_TOP , parseInt((hours%1000)/100) , ctx );
  renderDigit( MARGIN_LEFT + 280, MARGIN_TOP , parseInt(((hours%1000)%100)/10) , ctx );
   renderDigit( MARGIN_LEFT + 429, MARGIN_TOP , parseInt(((hours%1000)%100)%10) , ctx );
   renderDigit( MARGIN_LEFT + 572, MARGIN_TOP , 10 , ctx );
   renderDigit( MARGIN_LEFT + 654, MARGIN_TOP , parseInt(minutes/10) , ctx);
   renderDigit( MARGIN_LEFT + 798, MARGIN_TOP , parseInt(minutes%10) , ctx);
   renderDigit( MARGIN_LEFT + 941, MARGIN_TOP , 10 , ctx);
   renderDigit( MARGIN_LEFT + 1024, MARGIN_TOP , parseInt(seconds/10) , ctx);
   renderDigit( MARGIN_LEFT + 1170, MARGIN_TOP , parseInt(seconds%10) , ctx);
}

function renderDigit( x , y , num , ctx ){

   ctx.strokeStyle = "#FFFFFF";

   for( var i = 0 ; i < digit[num].length ; i ++ )
       for(var j = 0 ; j < digit[num][i].length ; j ++ )
           if( digit[num][i][j] == 1 ){
               ctx.beginPath();
           ctx.moveTo(0,20);
           ctx.lineTo(20,10);
           ctx.lineWidth = 2
           ctx.stroke();
           ctx.closePath();
        }
           if( digit[num][i][j] == 2 ){
            ctx.beginPath();
            ctx.moveTo(20,0);
            ctx.lineTo(10,20);
            ctx.lineWidth = 2
            ctx.stroke();
            ctx.closePath();
        }
}