var w_height=768;

var w_width=1024;

var RADIUS=8;

var MARGIN_TOP=60;

var MARGIN_LEFT=30;

const endtime=new Date(2016,7,25,11,20);

var curShowTimeSeconds = 0;

window.onload=function()

{

???????????? var canvas=document.getElementById("canvas");

???????????? var context=canvas.getContext("2d");

???????????? canvas.height=w_height;

???????????? canvas.width=w_width;

???????????? curShowTimeSeconds =getCurrentShowTimeSeconds()

???????????? render(context);

}

function render(cxt)

{

???????????? var hours = parseInt( curShowTimeSeconds / 3600);

????????????? ? var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 )

????????????? ? var seconds = curShowTimeSeconds % 60 ;

????????????? ?renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt )

????????????? ?renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt )

????????????? ?renderDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , cxt )

????????????? ?renderDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(minutes/10) , cxt);

????????????? ?renderDigit( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(minutes%10) , cxt);

????????????? ?renderDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt);

????????????? ?renderDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) , cxt);

????????????? ?renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) , cxt);

}

function getCurrentShowTimeSeconds(){

????????????? ? var curTime = new Date();

????????????? ? var ret = endTime.getTime() - curTime.getTime();

????????????? ? ret = Math.round( ret/1000 )

????????????

????????????? ? return ret >= 0 ? ret : 0;

}

function rendarDidit(x,y,num,cxt)

{

???? cxt.fillStyle="#00f";

????

????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();

???????????????????????????? cxt.arc(x+2*j*(RADIUS+1)+(RADIUS+1),y+2*i*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);

???????????????????????????? cxt.closePath()；

???????????????????????????? cxt.fill()；

????????????????}

????????}

}