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;//現(xiàn)在倒計時要多少秒
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
?? ?};
?? ??? ?

}

//獲取間隔秒數(shù)
function getcurrentshowtimesecond(){
? var curtime = new Date();//獲取當前時間
? var ret = endtime.getTime()-curtime.getTime();? //截止時間減去當前時間
?
? ret=Math.round(ret/1000);//將毫秒轉(zhuǎn)化為秒，并且轉(zhuǎn)化為整數(shù)
? return ret >=0 ? ret:0;//判斷ret是否到0，到的話表示計時結(jié)束，直接為0
}


function update(){
?? ?var nextshowtimesecond = getcurrentshowtimesecond();//獲取下次的秒數(shù)
?? ?
?? ?var nhours=parseInt(nextshowtimesecond/3600); //接下來的小時
?? ?var nminutes=parseInt((nextshowtimesecond-nhours*3600)/60);//接下來的分鐘
?? ?var nseconds=nextshowtimesecond%60;? //接下來的秒數(shù)
?? ?
?? ?
?? ?var hours=parseInt(curshowtimespeed/3600); //當前秒數(shù)除以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); //當前秒數(shù)除以3600得到需要的小時
?? ?var minutes=parseInt((curshowtimespeed-hours*3600)/60);//得到需要的分鐘
?? ?var seconds=curshowtimespeed%60;? //得到描述
?? ?//前兩個margin表示數(shù)字開始繪制的位置,parseInt是要繪制的數(shù)字，數(shù)字是一個一個繪制，所以兩位數(shù)就拆開來這里是十位數(shù)
?? ?//，繪制必須要獲取上下文環(huán)境，所以加入cxt
?? ?renderDigit(margin_left,margin_top,parseInt(hours/10),cxt);
?? ?//數(shù)組是7*10大小，所以橫向是14個（半徑+1）長度，即距離左邊距的位置為了加寬間距，就是15 ，這里是個位數(shù)????? ?
?? ?renderDigit(margin_left+15*(radious+1),margin_top,parseInt(hours%10),cxt)
?? ?//繪制符號“：”,10在digit函數(shù)中是 ":" 符號
?? ?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++){?????? //第一重循環(huán)是確定繪制的數(shù)字
?? ??? ?for(var j=0;j<digit[num][i].length;j++){ //第二重循環(huán)是對組成數(shù)字的每行點陣繪制
?? ??? ??? ?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();
?? ??? ??? ?}
?? ??? ?}
?? ?}
}