为了账号安全,请及时绑定邮箱和手机立即绑定

小球不会下落,一直叠加

var Width=1024;
var Height=768;
var Ru=8; //小圆的半径,后面圆心X/Y坐标加1,是为了美观
var Top =60;  // 数字距离画布上边距
var Left =30; // 数字距离画布左边距

var endDate =new Date(2014,10,3,23,59,59);
var showTimeSeconds =0; // 用来存放开始时与结束时之间的秒数

var balls=[]; //存放小球
var ballColors=["#33b5e5","#0099cc","#a6c","#93c","#9c0","#690","#fb3","#f80","#f44","#c00"];

window.onload =function(){

     var canvas =document.getElementById("canvas");
     canvas.width=Width;  
     canvas.height=Height;
     var context =canvas.getContext("2d");
     
     showTimeSeconds =getTimeSeconds();
     setInterval(function(){
              render(context);
             upDate();
     },100);

}

function upDate(){

    var nextShowTimeSeconds =getTimeSeconds();

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

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

    if(nextSeconds != curSeconds){
           
           if(parseInt(curHours/10) != parseInt(nextHours/10)){
                addBalls(Left + 0*(Ru+1) ,Top,parseInt(curHours/10));
           }
           if(parseInt(curHours%10) != parseInt(nextHours%10)){
                addBalls(Left + 15*(Ru+1) ,Top,parseInt(curHours%10));
           }
           if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){
                addBalls(Left + 39*(Ru+1) ,Top,parseInt(curMinutes/10));
           }
           if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){
                addBalls(Left + 54*(Ru+1) ,Top,parseInt(curMinutes%10));
           }
           if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){
                addBalls(Left + 78*(Ru+1) ,Top,parseInt(curSeconds/10));
           }
           if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){
                addBalls(Left + 93*(Ru+1) ,Top,parseInt(curSeconds%10));
           }
           showTimeSeconds =nextShowTimeSeconds;
    }

    upDateBalls();
}

function upDateBalls(){

    for(var i=0;i<balls.length;i++){
           balls[i].x  +=bals[i].vx;
           balls[i].y  +=balls[i].vy;
           balls[i].vy +=balls[i].g;

           if(balls[i].y >= Height-Ru){
                balls[i].y =Height-Ru;
                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*(Ru+1)+(Ru+1),
                             y: y+i*2*(Ru+1)+(Ru+1),
                             g: 1.5+Math.random(), //重力 
                            vx: Math.pow(-1,Math.ceil(Math.random()*1000))*4, //x轴方向随机运动
                            vy: -5, //y轴有一种上抛的效果
                        color: ballColors[Math.floor(Math.random()*ballColors.length)]
                      };

                      balls.push(aBall);
                }
          }
     }
}

function getTimeSeconds(){

     var curTime =new Date();
     var ret =endDate.getTime()-curTime.getTime();
     ret =Math.round(ret/1000);

     return ret>=0 ? ret :0 ;
}


 function render(cxt){
      cxt.clearRect(0,0,Width,Height);  // 刷新,防止叠加
      var hours =parseInt( showTimeSeconds / 3600);
      var minutes =parseInt( (showTimeSeconds-hours*3600)/60 );
      var seconds =showTimeSeconds%60;
      
      /* 把数字拆分成两部分绘制:12 → 1+2 等 */
      renderDigit(Left,Top,parseInt(hours/10) ,cxt); // 数字之间占15个大小
      renderDigit(Left + 15*(Ru+1) ,Top,parseInt(hours%10) ,cxt);
      renderDigit(Left + 30*(Ru+1) ,Top ,10 ,cxt);  // digit[10]是冒号的点阵图,占9个大小
      renderDigit(Left + 39*(Ru+1) ,Top ,parseInt(minutes/10) ,cxt);
      renderDigit(Left + 54*(Ru+1) ,Top ,parseInt(minutes%10) ,cxt);
      renderDigit(Left + 69*(Ru+1) ,Top,10,cxt);
      renderDigit(Left + 78*(Ru+1) ,Top,parseInt(seconds/10) ,cxt);
      renderDigit(Left + 93*(Ru+1) ,Top,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,Ru,0,2*Math.PI);
          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++){  //数字对应的点阵图0、1、2。。。或者是 冒号‘:’
           for(var j=0;j<digit[num][i].length;j++){  //  判断点阵图中的每一行
                 if(digit[num][i][j] == 1){    // 1:绘制 0:不绘制

                        cxt.beginPath();
                        cxt.arc(x+j*2*(Ru+1)+(Ru+1) ,y+i*2*(Ru+1)+(Ru+1) ,Ru , 0,2*Math.PI);
                        cxt.closePath();

                        cxt.fill();
                 }
           }

      }
 }


正在回答

2 回答

大赞!也希望关注这个课程的后续:《Canvas绘图详解》:)

0 回复 有任何疑惑可以回复我~
#1

糊糊_Men 提问者

非常感谢!
2015-06-24 回复 有任何疑惑可以回复我~

已解决,是69行balls 少了一个 l

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信