var?RADIUS?=?10;
var?TOP?=?60;
var?LEFT?=?30;
const?endTime?=?new?Date(2016,6,27,22,0,0);
var?WIDTH?=?1324;
var?HEIGHT?=?786;
var?dur?=?0;

window.onload?=?function(){

var?oC?=?document.getElementById("canvas");
var?oContext?=?oC.getContext("2d");
oC.width?=?WIDTH;
oC.height?=?HEIGHT;
dur?=?getDuration();
?setInterval(function(){
????????????render(?oContext?);
????????????update();
????????}?,?50
????);

}

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

????return?ret?>=?0???ret?:?0;
}
function?update(){
var?nextTimeDur?=?getDuration();
var?nextHours?=?parseInt(?nextTimeDur?/?3600);
????var?nextMinutes?=?parseInt(?(nextTimeDur?-?nextHours?*?3600)/60?);
????var?nextSeconds?=?nextTimeDur?%?60;

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

????if(?nextSeconds?!=?curSeconds?){
????????dur?=?nextTimeDur;
????}
//end?=?new?Date().getTime();
}
function?render(oContext){
//start?=?new?Date().getTime();
oContext.clearRect(0,0,WIDTH,HEIGHT);

var?hour?=?parseInt(dur/3600);
var?min?=?parseInt((dur-hour*3600)/60);
var?sec?=?parseInt(dur%60);

draw(TOP,?LEFT,?oContext,?parseInt(hour/10));
draw(TOP+15*(RADIUS+1),?LEFT,?oContext,?parseInt(hour%10));

draw(TOP+30*(RADIUS+1),?LEFT,?oContext,?10);

draw(TOP+39*(RADIUS+1),?LEFT,?oContext,?parseInt(min/10));
draw(TOP+54*(RADIUS+1),?LEFT,?oContext,?parseInt(min%10));

draw(TOP+69*(RADIUS+1),?LEFT,?oContext,?10);

draw(TOP+78*(RADIUS+1),?LEFT,?oContext,?parseInt(sec/10));
draw(TOP+93*(RADIUS+1),?LEFT,?oContext,?parseInt(sec/10));

}
function?draw(TOP,?LEFT,?oContext,?num){
oContext.fillStyle?=?"blue";
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){
oContext.beginPath();

oContext.arc(TOP+RADIUS+1+j*2*(RADIUS+1),?LEFT+RADIUS+1+i*2*(RADIUS+1),?RADIUS,?0,?2*Math.PI);
oContext.closePath();
oContext.fill();
}
}
}
}