                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

做了一个计时器，但是把setInterval放在window.onload以后就不能刷新时间了。这是为什么呢？

var WINDOW_WIDTH = 600,
    WINDOW_HEIGHT = 300;
var RADIUS = 4,
    DISTANCE = 1;
var hour=0,minute=0,second=0;

window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

setInterval(drawTime(context),500);
    
//drawTime(context);

}




function checkTime(i){
    if(i<10){
        i = '0'+i;
    }
    
    return i;
}

function drawTime(cnt){
 
    //var timer = setInterval(function(){
       
        var now = new Date();

        hour = now.getHours(),
        minute = now.getMinutes(),
        second = now.getSeconds();
    
    hour = checkTime(hour);
    minute = checkTime(minute);
    second = checkTime(second);
    
    var h1 = parseInt(hour/10),
        h2 = hour%10,
        m1 = parseInt(minute/10),
        m2 = minute%10,
        s1 = parseInt(second/10),
        s2 = second%10;
    
    var digitWidth = Math.floor(WINDOW_WIDTH/8),
        markWidth = parseInt(digitWidth/7*4);
    
    cnt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);//保证每次数字刷新，canvas都跟着刷新
        
    drawDigit(h1,0,cnt);
    drawDigit(h2,digitWidth,cnt);
    drawDigit(10,2*digitWidth,cnt);
    drawDigit(m1,digitWidth*2+markWidth,cnt);
    drawDigit(m2,digitWidth*3+markWidth,cnt);
    drawDigit(10,digitWidth*4+markWidth,cnt);
    drawDigit(s1,digitWidth*4+markWidth*2,cnt);
    drawDigit(s2,digitWidth*5+markWidth*2,cnt);
    
   // },500);
    

   
   
}
    
    
function drawDigit(num,dr,cnt){
    
    for(var i = 0; i<digit[num].length;i++){
        for(var j = 0; j<digit[num][i].length;j++){
            var rx = (2*j+1)*(RADIUS + DISTANCE)+dr,
                ry = (2*i+1)*(RADIUS + DISTANCE);
            
            if (digit[num][i][j] == 1){
            
            cnt.beginPath();
            cnt.arc(rx,ry,RADIUS,0,2*Math.PI);
            cnt.closePath();
            
            cnt.fillStyle = '#03356f';
            cnt.fill();}
                         
        }//点阵数组中的每一排
    }//取到digit数组中第h1个点阵数组

}