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();
}
}
}
}
找了半天 你绘制的时候写错了:
draw(TOP+93*(RADIUS+1), LEFT, oContext, parseInt(sec/10));
改为
draw(TOP+93*(RADIUS+1), LEFT, oContext, parseInt(sec%10));