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(); } } } }
相关分类