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

老师：我做了一个当前时间而不是倒计时的效果结果小球跳动时与时间变换中间相差了一秒

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/reset.css"/>
</head>
<body>
    <canvas id="canvas" style="display:block;">
        当前浏览器不支持Canvas，请更换浏览器后再试
 </canvas>
    <script src="js/digit.js"></script>
    <script>
        var window_width=1366;
        var window_height=643;
        var radius=3.5;
        var curShowTimeSeconds=0;


        var balls=[];
        const colors=['#33b5e5',"#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#ffbb33","#ff8800","#ff4444","#cc0000"]

        window.onload=function() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            canvas.width=window_width;
            canvas.height=window_height;

            curShowTimeSeconds=getCurrentShowTimeSeconds();

            setInterval(function(){
                render(context);
                updata();
            },50)
        }
        function getCurrentShowTimeSeconds() {
            var curTime = new Date();
            var ret = curTime.getTime();
            ret = Math.round( ret/1000 )

            return ret
 }
        function render(cxt){
            cxt.clearRect(0,0,window_width,window_height);
            var date=new Date();

//             var hours = parseInt( curShowTimeSeconds / 3600);
//             var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 );
//             var seconds = curShowTimeSeconds % 60;

 var hours=date.getHours();
            var minutes=date.getMinutes();
            var seconds=date.getSeconds();
            renderdigit(800,200,parseInt(hours/10),cxt);
            renderdigit(800+15*(radius+1),200,parseInt(hours%10),cxt);
            renderdigit(800+30*(radius+1),200,10,cxt);
            renderdigit(800+39*(radius+1),200,parseInt(minutes/10),cxt);
            renderdigit(800+54*(radius+1),200,parseInt(minutes%10),cxt);
            renderdigit(800+69*(radius+1),200,10,cxt);
            renderdigit(800+78*(radius+1),200,parseInt(seconds/10),cxt);
            renderdigit(800+93*(radius+1),200,parseInt(seconds%10),cxt);
            for( var i = 0 ; i < balls.length ; i ++ ){
                cxt.fillStyle=balls[i].color;
                cxt.beginPath();
                cxt.arc( balls[i].x , balls[i].y , radius , 0 , 2*Math.PI , true );
                cxt.closePath();
                cxt.fill();
            }
        }
        function renderdigit(x,y,num,cxt){
            cxt.fillStyle="rgb(0,102,153)";
            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+j*2*(radius+1)+(radius+1),y+i*2*(radius+1)+(radius+1),radius,0,2*Math.PI);
                        cxt.closePath();
                        cxt.fill();
                    }
        }

        function updata(){
            var nextShowTimeSeconds = getCurrentShowTimeSeconds();

            var nextHours = parseInt( nextShowTimeSeconds / 3600);
            var nextMinutes = parseInt( (nextShowTimeSeconds - nextHours * 3600)/60 )
            var nextSeconds = nextShowTimeSeconds % 60

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

 if( nextSeconds != curSeconds ){
                if( parseInt(curHours/10) != parseInt(nextHours/10) ){
                    addBalls( 800  , 200 , parseInt(curHours/10) );
                }
                if( parseInt(curHours%10) != parseInt(nextHours%10) ){
                    addBalls( 800 + 15*(radius+1) , 200 , parseInt(curHours/10) );
                }

                if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){
                    addBalls( 800 + 39*(radius+1) , 200 , parseInt(curMinutes/10) );
                }
                if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
                    addBalls( 800 + 54*(radius+1) , 200 , parseInt(curMinutes%10) );
                }

                if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
                    addBalls( 800 + 78*(radius+1) , 200 , parseInt(curSeconds/10) );
                }
                if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
                    addBalls( 800 + 93*(radius+1) , 200 , parseInt(nextSeconds%10) );
                }

                curShowTimeSeconds = nextShowTimeSeconds;
            }

            updateBalls();
        }
        function updateBalls(){

            for( var i = 0 ; i < balls.length ; i ++ ){

                balls[i].x += balls[i].vx;
                balls[i].y += balls[i].vy;
                balls[i].vy += balls[i].g;

                if( balls[i].y >= window_height-radius ){
                    balls[i].y = window_height-radius;
                    balls[i].vy = - balls[i].vy*0.75;
                }
            }
        }

        function addBalls( x , y , num ){
            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 ){
                        var aBall = {
                            x:x+j*2*(radius+1)+(radius+1),
                            y:y+i*2*(radius+1)+(radius+1),
                            g:1.5+Math.random(),
                            vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,
                            vy:-5,
                            color: colors[ Math.floor( Math.random()*colors.length ) ]
                        }

                        balls.push( aBall )
                    }
        }

    </script>
</body>
</html>