var windows_height=768;
var windows_width=1024;
var radious=8;  //小球半径
var margin_top=60;
var margin_left=30;
const endtime = new Date("2017/9/16,20:59:59");//6实际是7月
var curshowtimespeed = 0;//现在倒计时要多少秒
window.onload = function(){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    
    canvas.height=windows_height;
    canvas.width=windows_width;
    
    curshowtimespeed = getcurrentshowtimesecond();//得到间隔时间
    setInterval{
        function(){
                render(context);
        }
        ,
        50
    };
        

}

//获取间隔秒数
function getcurrentshowtimesecond(){
  var curtime = new Date();//获取当前时间
  var ret = endtime.getTime()-curtime.getTime();  //截止时间减去当前时间
 
  ret=Math.round(ret/1000);//将毫秒转化为秒，并且转化为整数
  return ret >=0 ? ret:0;//判断ret是否到0，到的话表示计时结束，直接为0
}


function update(){
    var nextshowtimesecond = getcurrentshowtimesecond();//获取下次的秒数
    
    var nhours=parseInt(nextshowtimesecond/3600); //接下来的小时
    var nminutes=parseInt((nextshowtimesecond-nhours*3600)/60);//接下来的分钟
    var nseconds=nextshowtimesecond%60;  //接下来的秒数
    
    
    var hours=parseInt(curshowtimespeed/3600); //当前秒数除以3600得到需要的小时
    var minutes=parseInt((curshowtimespeed-hours*3600)/60);//得到需要的分钟
    var seconds=curshowtimespeed%60;  //得到描述
    
    //如果
    if(nseconds != seconds){
        //得到新时间        
        curshowtimespeed = nextshowtimesecond;
    }
}


//绘制作用
function render(cxt){
    cxt.clearRect(0,0,windows_width,windows_height);//对矩形空间刷新操作
    
    var hours=parseInt(curshowtimespeed/3600); //当前秒数除以3600得到需要的小时
    var minutes=parseInt((curshowtimespeed-hours*3600)/60);//得到需要的分钟
    var seconds=curshowtimespeed%60;  //得到描述
    //前两个margin表示数字开始绘制的位置,parseInt是要绘制的数字，数字是一个一个绘制，所以两位数就拆开来这里是十位数
    //，绘制必须要获取上下文环境，所以加入cxt
    renderDigit(margin_left,margin_top,parseInt(hours/10),cxt);
    //数组是7*10大小，所以横向是14个（半径+1）长度，即距离左边距的位置为了加宽间距，就是15 ，这里是个位数       
    renderDigit(margin_left+15*(radious+1),margin_top,parseInt(hours%10),cxt)
    //绘制符号“：”,10在digit函数中是 ":" 符号
    renderDigit(margin_left+30*(radious+1),margin_top,10,cxt)
       //冒号占了8个宽度，所以这里是9
    renderDigit(margin_left+39*(radious+1),margin_top,parseInt(minutes/10),cxt)
    
    renderDigit(margin_left+54*(radious+1),margin_top,parseInt(minutes%10),cxt)
    //第二个冒号
    renderDigit(margin_left+69*(radious+1),margin_top,10,cxt)
    
    renderDigit(margin_left+78*(radious+1),margin_top,parseInt(seconds/10),cxt)
    
    renderDigit(margin_left+93*(radious+1),margin_top,parseInt(seconds%10),cxt)
}


function renderDigit(x,y,num,cxt){
    cxt.fillStyle = "rgb(0,102,153)";
    
    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){
                cxt.beginPath();//小球之间留有1px空隙，半径是radious,从0画到2PI
                cxt.arc(x+j*2*(radious+1)+(radious+1),y+i*2*(radious+1)+(radious+1),radious,0,2*Math.PI);
                cxt.closePath();
                
                cxt.fill();
            }
        }
    }
}